使用纯css禁用html中a标签无需JavaScript

其实这个问题在初次学习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="#"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> 
&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标签的功能。

时间: 2024-11-05 23:01:58

使用纯css禁用html中a标签无需JavaScript的相关文章

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

其实这个问题在初次学习html中select标签时就已经冒出来了,时至今日,依然没有找到使用纯css禁用a标签的办法--同事.同学.老师我都问过了,他们都千篇一律借助了JavaScript,难道真的必须要借助JavaScript吗? 1.纯css实现html中a标签的禁用: <html> <head> <title>如何禁用a标签</title> <metacontent="text/html; charset=GB2312"htt

纯CSS自定义Html中Checkbox复选框样式

原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观. 要做到这一点需要添加一段代码到你的CSS文件中. /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有

一个标签的72变,打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,求star!) 关于改造,一开始的想法就是使用百分比尺寸来改造,然

CSS中,html中的标签元素

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br>.<

区别CSS中display:box;inline;none以及HTML中 &lt;frame&gt; 标签&lt;table&gt; 标签的 frame 属性

区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内容自动换行;行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度:<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子,意思是他们默认显示方式是block: display:inl

CSS中A标签断字不换行问题(基础知识)

CSS中A标签断字不换行问题 样式表中A标签自动换行的问题,有时候需要做一个列表,比如学校的列表,部门的列表,但有的时候会有问题,比如出现一个完整的学校名称却自动换行,但如果不想让他自动换行该怎么办呢,其实你只要在样式表中加上几句话就行了,如下 .ArtTagList a{width:auto;height:auto;float:left;display:block;white-space:nowrap;margin-left:0px;margin-right:0px;}

IOS使用正则表达式去掉html中的标签元素,获得纯文本

IOS使用正则表达式去掉html中的标签元素,获得纯文本 content是根据网址获得的网页源码字符串 NSRegularExpression *regularExpretion=[NSRegularExpression regularExpressionWithPattern:@"<[^>]*>|\n"                                                                                   

IOS 去掉代码html中的标签元素,获得纯文本

content是根据网址获得的网页源码字符串    NSRegularExpression *regularExpretion=[NSRegularExpression regularExpressionWithPattern:@"<[^>]*>|\n"  options:0  error:nil]; //替换所有html和换行匹配元素为"-"        content=[regularExpretion stringByReplacingMa

在head标签里加一个meta标签让指定ie使用特定内核 解决css在ie中的兼容性问题

<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"/> IE=edge: 默认使用最新内核 IE=6/7/8.... 指定特定版本内核 chrome=1:如果有装chrome就使用chrome的内核 IE的兼容性问题: 在早起IE8之前,那个时候IE浏览器还属于比较独大的情况,那个时候他有很多东西是和网络的Standard不太一样.譬如他有自己才看的懂得自定义Tag.作为那个时代,