使用纯css禁用html中a标签无需JavaScript
2014-05-13 17:28
731 查看
其实这个问题在初次学习html中select标签时就已经冒出来了,时至今日,依然没有找到使用纯css禁用a标签的办法——同事、同学、老师我都问过了,他们都千篇一律借助了JavaScript,难道真的必须要借助JavaScript吗?
1、纯css实现html中a标签的禁用:
上面虽然使用纯css实现了对a标签的禁用,不过由于opera、ie浏览器不支持pointer-events样式,所以上面代码在这两类浏览器中起不到禁用a标签的作用。
2、借助Jquery和css实现html中a标签的禁用:
这种方式可以兼容所有浏览器,可是混用了JavaScript,这一点恐怕是致命的缺憾!!!
3、借助Jquery实现html中a标签的禁用:
上面使用了纯Jquery实现了禁用html中a标签的功能。
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> <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 \\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> <a class="disableCss" href="#" onclick="javascript:alert('你好!!!');">点击</a> </body> </html>
上面使用了纯Jquery实现了禁用html中a标签的功能。
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- JavaScript快速检测浏览器对CSS3特性的支持情况
- 7款风格新颖的jQuery/CSS3菜单导航分享
- Chrome渲染Transition时页面闪动Bug
- 《HTML+CSS3权威指南》笔记摘要 - 目录
- 常用API网盘分享连接
- 纯CSS2实现的边框三角形
- 完全掌握纯CSS布局网页