首頁 > 開發者 > 網站開發

關于禁用html中a標籤的思考

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：c   style   class   java   a   http   

       事實上這個問題在初次學習html中select標籤時就已經冒出來了，時至今日，依舊沒有找到使用純css禁用a標籤的辦法——同事、同學、老師我都問過了，他們都千篇一律藉助了JavaScript，難道真的必需要藉助JavaScript嗎？

        1、純css實現html中a標籤的禁用：         

              <html>

                           <head>

                                        <title>怎樣禁用a標籤</title>

                                        <metacontent="text/html; charset=GB2312"http-equiv="Content-Type">

                                        <style type="text/css">

                                                    body{

                                                                   font:12px/1.5 \5B8B\4F53, Georgia, Times New Roman, serif, arial;

                                                   }

                                                  a{

                                                                   text-decoration:none;

                                                                   outline:0 none;

                                                   }

                                                  .disableCss{

                                                                   pointer-events:none;

                                                                   color:#afafaf;

                                                                   cursor:default

                                                   }

                                        </style>

                              </head>

                     <body>

                                  <aclass="disableCss" href="http://www.baidu.com/">百度</a>

                                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                 <aclass="disableCss" href="#"onclick="javascript:alert(‘你好！！！‘);">點擊</a>

                    </body>

          </html>

         上面儘管使用純css實現了對a標籤的禁用，只是因為opera、ie瀏覽器不支援pointer-events樣式，所以上面代碼在這兩類瀏覽器中起不到禁用a標籤的作用。

          2、藉助Jquery和css實現html中a標籤的禁用：

          <html>
                      <head>
                                 <title>02 ——藉助Jquery和css實現html中a標籤的禁用</title>
                                 <meta content="text/html; charset=GB2312" http-equiv="Content-Type">
                                 <script type="text/javascript" src="./jquery-1.6.2.js"></script>
                                 <script type="text/javascript">
                                               $(function() {
                                                       $(‘.disableCss‘).removeAttr(‘href‘);//去掉a標籤中的href屬性
                                                       $(‘.disableCss‘).removeAttr(‘onclick‘);//去掉a標籤中的onclick事件
                                               });
                                </script>
                                <style type="text/css">
                                              body {
                                                      font: 12px/1.5 \5B8B\4F53, Georgia, Times New Roman, serif, arial;
                                              }
                                             a {
                                                      text-decoration: none;
                                                      outline: 0 none;
                                             }
                                            .disableCss {
                                                      color: #afafaf;
                                                      cursor: default
                                             }
                               </style>
                  </head>
                  <body>
                               <a class="disableCss" href="http://www.baidu.com/">百度</a>
                               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                               <a class="disableCss" href="#" onclick="javascript:alert(‘你好！！！‘);">點擊</a>
                 </body>
         </html>

         這樣的方式能夠相容全部瀏覽器，但是混用了JavaScript，這一點恐怕是致命的缺憾！！！

         3、藉助Jquery實現html中a標籤的禁用：

         <html>
                   <head>
                               <title>03 ——藉助Jquery實現html中a標籤的禁用</title>
                               <meta content="text/html; charset=GB2312" http-equiv="Content-Type">
                               <script type="text/javascript" src="./jquery-1.6.2.js"></script>
                               <script type="text/javascript">
                                            $(function() {
                                                         $(‘.disableCss‘).removeAttr(‘href‘);//去掉a標籤中的href屬性
                                                         $(‘.disableCss‘).removeAttr(‘onclick‘);//去掉a標籤中的onclick事件
                                                         $(".disableCss").css("font","12px/1.5 \\5B8B\\4F53, Georgia, Times New Roman, serif, arial");
                                                         $(".disableCss").css("text-decoration","none");
                                                         $(".disableCss").css("color","#afafaf");
                                                         $(".disableCss").css("outline","0 none");
                                                         $(".disableCss").css("cursor","default");
                                          });
                              </script>
                     </head>
                     <body>
                             <a class="disableCss" href="http://www.baidu.com/">百度</a>
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                             <a class="disableCss" href="#" onclick="javascript:alert(‘你好！！！‘);">點擊</a>
                    </body>
        </html>

        上面使用了純Jquery實現了禁用html中a標籤的功能。

         【0分demo下載】

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More