首页 > 代码库 > 关于禁用html中a标签的思考

关于禁用html中a标签的思考

       事实上这个问题在初次学习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="http://www.mamicode.com/#"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="http://www.mamicode.com/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="http://www.mamicode.com/#" 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="http://www.mamicode.com/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="http://www.mamicode.com/#" onclick="javascript:alert(‘你好!!!‘);">点击</a>
                    </body>
        </html>

        上面使用了纯Jquery实现了禁用html中a标签的功能。

         【0分demo下载