| 标题 | 使用纯css禁用html中a标签无需JavaScript |
| 内容 | 1、纯css实现html中a标签的禁用： 代码如下: <html> <head> <title>如何禁用a标签</title> <metacontent="text/html;charset=GB2312"http-equiv="Content-Type"> <styletype="text/css"> body{ font:12px/1.5\5B8B\4F53,Georgia,TimesNewRoman,serif,arial; } a{ text-decoration:none; outline:0none; } .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> <metacontent="text/html;charset=GB2312"http-equiv="Content-Type"> <scripttype="text/javascript"src="./jquery-1.6.2.js"></script> <scripttype="text/javascript"> $(function(){ $('.disableCss').removeAttr('href');//去掉a标签中的href属性 $('.disableCss').removeAttr('onclick');//去掉a标签中的onclick事件 }); </script> <styletype="text/css"> body{ font:12px/1.5\5B8B\4F53,Georgia,TimesNewRoman,serif,arial; } a{ text-decoration:none; outline:0none; } .disableCss{ color:#afafaf; cursor:default } </style> </head> <body> <aclass="disableCss"href="http://www.baidu.com/">百度</a> <aclass="disableCss"href="#"onclick="javascript:alert('你好！！！');">点击</a> </body> </html> 这种方式可以兼容所有浏览器，可是混用了JavaScript，这一点恐怕是致命的缺憾！！！ 3、借助Jquery实现html中a标签的禁用： 代码如下: <html> <head> <title>03——借助Jquery实现html中a标签的禁用</title> <metacontent="text/html;charset=GB2312"http-equiv="Content-Type"> <scripttype="text/javascript"src="./jquery-1.6.2.js"></script> <scripttype="text/javascript"> $(function(){ $('.disableCss').removeAttr('href');//去掉a标签中的href属性 $('.disableCss').removeAttr('onclick');//去掉a标签中的onclick事件 $(".disableCss").css("font","12px/1.5\\5B8B\\4F53,Georgia,TimesNewRoman,serif,arial"); $(".disableCss").css("text-decoration","none"); $(".disableCss").css("color","#afafaf"); $(".disableCss").css("outline","0none"); $(".disableCss").css("cursor","default"); }); </script> </head> <body> <aclass="disableCss"href="http://www.baidu.com/">百度</a> <aclass="disableCss"href="#"onclick="javascript:alert('你好！！！');">点击</a> </body> </html> 上面使用了纯Jquery实现了禁用html中a标签的功能。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。