zoukankan      html  css  js  c++  java
  • 关于禁用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 5B8B4F53, 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 5B8B4F53, 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下载

  • 相关阅读:
    通过 Web 服务共享 Windows 剪贴板
    bzoj 1007[HNOI2008]水平可见直线 半平面交
    c#读写INI
    c#获得伪静态页码
    c#判断部分
    c#网络通信
    C# 转换函数
    c#文件操作
    c#进制转换
    服务器端异步接受SOKCET请求
  • 原文地址:https://www.cnblogs.com/blfshiye/p/3770315.html
Copyright © 2011-2022 走看看