| 标题 | 使用纯css禁用html中a标签无需javascript |
| 内容 | 其实这个问题在初次学习html中select标签时就已经冒出来了，时至今日，依然没有找到使用纯css禁用a标签的办法——同事、同学、老师我都问过了，他们都千篇一律借助了javascript，难道真的必须要借助javascript吗？ 1、纯css实现html中a标签的禁用： 代码如下: <html> <head> <title>如何禁用a标签</title> <metacontent=text/html; charset=gb2312http-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> <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> <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, 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> <a class=disablecss href=# onclick=javascript:alert('你好！！！');>点击</a> </body> </html> 上面使用了纯jquery实现了禁用html中a标签的功能。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。