关于禁用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">

body{

font:12px/1.5 \5B8B\4F53, Georgia, Times New Roman, serif, arial;

}

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="#"οnclick="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="#" οnclick="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="#" οnclick="javascript:alert('你好！！！');">点击</a>
</body>
</html>

上面使用了纯Jquery实现了禁用html中a标签的功能。

【0分demo下载】

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

.vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景问题由 ...
php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
resultmap的写法_mybatis的mapper.xml中resultMap标签的使用详解
1.前言最近博主在做一个ssm框架的共享汽车管理系统,其中,数据库字段设计的有下划线方式,a_username,然后在写mapper.xml里面的sql语句的时候,一直出现查询语句查询的值为null ...
java将xml中的标签名称转为小写_深入学习Java Web(七): JSTL标签库
本文转自与博客园一杯凉茶的博客. 在之前我们学过在JSP页面上为了不使用脚本,所以我们有了JSP内置的行为.行为只能提供一小部分的功能,大多数的时候还是会用java脚本,接着就使用了EL表达式,基本上 ...
One-Error多标签分类_深度学习：如何在多标签分类问题中考虑标签间的相关性？
1 多标签问题的简单解决思路利用神经网络,我们可以很轻松处理一个多标签问题.如标题图所示,为前馈神经网络添加适当数量的隐含层,同时在输出层使用某个阈值判断标签分类结果即为一种基础的解决思路. 上述是 ...
html中日期下拉选怎么设置,html中option标签（下拉列表选项）的详细介绍
大家好,欢迎关注支持,谢谢!本篇将介绍html中option标签(下拉列表选项)的详细用法,有兴趣的朋友可以了解一下! 在网页中,下拉列表是一种很常见的显示效果,你知道在html源代码中是怎样实现的吗 ...
虚拟人在虚拟现实中应用的技术思考与研究
虚拟人在虚拟现实中应用的技术思考与研究内容摘要:虚拟人是虚拟现实中的一个重要部分,很大程度上决定了用户的沉浸感与虚拟世界的代入感.对于虚拟人技术的探索也从未间断过,并且取得了较为不错的发展与成果.在 ...
JSP中meta标签之详解
JSP中meta标签之详解 2013年01月26日 16:09:27 阅读数:5589 JSP标签 <meta.....>作用总结 <metahttp-equiv="pra ...
html中什么表示下拉列表,html中select标签（下拉列表）的详细介绍
html中select标签(下拉列表)的详细用法,有兴趣的朋友可以了解一下! 在网页中,下拉列表很常见,那你知道在html源代码中是怎么实现的吗?今天要分享的就是html中实现下拉列表的标签,即sel ...
html中p标签的伪类选择器,表单标签和css伪类选择器
一.表单标签和input标签 1.表单标签:form 这个标签作为一个容器,来收集和提交这个标签中其他相关标签的数据,一般不单独使用 active属性:设置提交路径(接口) method属性:设置请求 ...

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

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

最新文章

热门文章