html中如何禁用,如何禁用HTML链接
小编典典
您不能(以便携式方式)禁用链接。您可以使用其中一种技术(每种技术都有其自身的优点和缺点)。
CSS方式
当大多数浏览器都支持它时,这应该是 正确的方法 (但请参阅后面):
a.disabled {
pointer-events: none;
}
例如,Bootstrap 3.x就是这样做的。目前(2016年),只有Chrome,FireFox和Opera(19+)才支持它。Internet
Explorer从版本11开始支持此功能,但不支持链接,但是它在外部元素中可用,例如:
span.disable-links {
pointer-events: none;
}
带有:
...
解决方法
我们可能需要为其定义CSS类,pointer-events:none但是如果我们重用该disabled属性而不是CSS类该怎么办?严格来说disabled不支持,但浏览器不会抱怨 未知
属性。使用disabledIE属性将被忽略,pointer-events但将支持IE特定的disabled属性。其他CSS兼容的浏览器将忽略未知 disabled属性和荣誉pointer-events。写起来比解释起来容易:
a[disabled] {
pointer-events: none;
}
IE 11的另一种选择是将display链接元素设置为block或inline-block:
...
请注意,如果您需要支持IE(并且可以更改HTML),那么这可能是一种 可移植的 解决方案,但是…
所有这些都请注意,pointer-events仅禁用…指针事件。 链接仍然可以通过键盘进行导航, 那么您还需要应用此处介绍的其他技术之一。
焦点
结合上述CSS技术,您可以tabindex以非标准方式使用,以防止元素被聚焦:
...
我从未检查过它与许多浏览器的兼容性,因此您可能需要在使用此功能之前对其进行测试。它具有无需JavaScript即可工作的优势。不幸的是(但显然)tabindex不能从CSS更改。
拦截点击
使用hrefJavaScript函数,检查条件(或禁用的属性本身),以防万一。
$("td > a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
要禁用链接,请执行以下操作:
$("td > a").attr("disabled", "disabled");
要重新启用它们:
$("td > a").removeAttr("disabled");
如果您愿意使用而不是.is("[disabled]")使用它.attr("disabled")!=undefined(undefined未设置属性时,jQuery 1.6+将始终返回),但is()更加清晰。请注意,这里我disabled以一种非标准的方式使用属性,如果您对此很在意,则将属性替换为类,并替换.is("[disabled]")为.hasClass("disabled")(使用addClass()和添加和删除removeClass())。
指出:
“在某些情况下,单击事件已绑定到某些“实际”功能(例如,使用基因敲除js)。在这种情况下,事件处理程序的排序可能会引起一些麻烦。因此,我通过绑定返回来实现禁用的链接假处理程序的链接的touchstart,mousedown和keydown事件。它也有一些缺点(它会阻止触摸滚动开始链接)”,但在处理键盘事件,还具有防止键盘导航的好处。
请注意,如果href未清除,则用户可以手动访问该页面。
清除链接
清除href属性。使用此代码,您无需添加事件处理程序,但可以更改链接本身。使用此代码可禁用链接:
$("td > a").each(function() {
this.data("href", this.attr("href"))
.attr("href", "javascript:void(0)")
.attr("disabled", "disabled");
});
然后重新启用它们:
$("td > a").each(function() {
this.attr("href", this.data("href")).removeAttr("disabled");
});
我个人不太喜欢这种解决方案(如果您不必对禁用的链接做更多的事情),但是由于遵循链接的方式多种多样,因此它 可能 更具兼容性。
假点击处理程序
onclick在您添加/删除功能的地方return false,将不会跟随链接。禁用链接:
$("td > a").attr("disabled", "disabled").on("click", function() {
return false;
});
要重新启用它们:
$("td > a").removeAttr("disabled").off("click");
我认为没有理由更喜欢这种解决方案而不是第一个解决方案。
造型
无论您使用哪种解决方案来禁用链接,样式都更加简单,我们确实添加了disabled属性,因此您可以使用以下CSS规则:
a[disabled] {
color: gray;
}
如果您使用的是类而不是属性:
a.disabled {
color: gray;
}
如果您使用的是UI框架,则可能会看到禁用链接的样式不正确。例如,Bootstrap3.x可以处理这种情况,并且可以正确地使用disabled属性和.disabled类对按钮进行样式设置。相反,如果您要清除链接(或使用其他JavaScript技术之一),则还必须处理样式,因为一个不带href的仍被标记为启用。
可访问的富互联网应用(ARIA)
不要忘了还包括一个属性aria-disabled="true"连同disabled属性/类。
2020-04-25
html中如何禁用,如何禁用HTML链接相关推荐
- 禁用/启用按钮和链接的最简单方法是什么(jQuery + Bootstrap)
本文翻译自:What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) Sometimes I u ...
- JAVA程序禁用Hbase中的表_HBase禁用表
要删除表或改变其设置,首先需要使用 disable 命令关闭表.使用 enable 命令,可以重新启用它. 下面给出的语法是用来禁用一个表: disable 'emp' 下面给出的是一个例子,说明如何 ...
- 如何为项目中的单个文件禁用ARC?
我在项目中成功使用了ARC. 但是,我遇到了一些文件(例如,在单元测试和模拟对象中),其中ARC规则现在更加脆弱. 我记得曾经听说有一种方法可以按文件禁用ARC,尽管我一直找不到该选项. 这可能吗? ...
- JavaScript(JS) 浏览器中设置启用或禁用
所有的现代浏览器都内置了对JavaScript的支持.通常,可能需要手动启用或禁用此支持.本章介绍在浏览器中启用和禁用JavaScript支持的过程:Internet Explorer.Firefox ...
- 老机器 系统教程篇:Win2003系统中注册表被禁用不能使用问题解决方法
注册表在系统中是一个非常重要的存在,哪天你要是发现注册表不能使用了,你肯定非常的着急,因为注册表不能运行,便不能通过注册表编辑器来下达各种命令让系统来执行了.要是遇到这种情况要如何处理呢? 首先,按住 ...
- input禁用判断禁用_如何在索尼电视上禁用运动平滑
input禁用判断禁用 Some newer Sony TVs have a built-in feature Sony calls "Motionflow," which is ...
- HTML中关于图像和表格,链接等的知识
下面是我分享的html中关于图像和表格,链接等知识: ①<img/>图像标签 <img/>标签中的一些常见属性:1,src是图像的路径属性,是img标签中必不可少的属性. 2, ...
- 怎么在html中加入相对链接,html直接跳转超链接 html中怎么实现同一页面超级链接...
html按钮button怎么加超链接 把放在a标签里,直接把链接放到标签里. 扩展资料 HTML 标签提示和注释 html 超链接如何设置点击跳转到根目录或其他目录 超链接跳转到其他的目录或者根目录一 ...
- 解决vue项目在浏览器中打开后,#后面的链接被截取的问题
在做微信公众号下载的时候遇到了这个问题: 微信公众号下载,做的是弹框提示,在浏览器中打开,结果在手机浏览器中打开的总是#之前的链接: 例如:http://yy2jd7.natappfree.cc/#/ ...
- 金蝶云星空物料批量禁用反禁用程序
[需求描述]:需要通过批量禁用反禁用操作物料. [操作方法]: 下载附件批量禁用程序. 首先双击安装,一直下一步. 双击打开 会提示需要配置账套信息 点击菜单栏配置 输入相关配置信息 填写完毕后 然后 ...
最新文章
- 随机查询N条记录MySQL、SQLServer、Oracle、postgreSQL
- 分治算法求乘方a^b 取余p(divide and conquer)
- 系统试运行报告是谁写的_最新标准:水污染源在线监测系统(CODCr、NH3N 等)安装技术规范(1)...
- 三十岁前不必在乎的三十件事
- Beta 冲刺 (2/7)
- 监控硬盘脚本linux,shell脚本实现磁盘监控系统
- 【ECJTU_ACM 11级队员2012年暑假训练赛(8) - F - A Mame】
- 华为服务器的中国梦——给客户带来价值
- 文件上传之IIS6.0解析漏洞
- 基于置信加权池的全卷积保证颜色恒常性
- Head First 设计模式
- 海康存储服务器 硬盘红色,海康磁盘阵列存储服务器
- 谷歌浏览器安装插件的方法步骤
- 2015 年全国电赛题——风力摆控制系统(B 题)
- 【Azure 应用服务】App Service 开启了私有终结点(Private Endpoint)模式后,如何来实现公网Git部署呢?
- TM4C123-JTAG
- 【Java从零到架构师第③季】【30】SpringMVC-转发_重定向_路径问题总结
- 免费聊天插件 mylivechat
- html游戏技术文档编写,HTML5编写的小游戏
- asp毕业设计——基于asp+access的教师档案管理系统设计与实现(毕业论文+程序源码)——教师档案管理系统
热门文章
- unity2019 vuforia 使用小记
- 190303每日一句
- 181201每日一句
- Atitit timer tech定时器技术总结目录1.1. 程序语言timer dbtimer ,os tiemr 11.2. Atitit timer定时框架api 11.3. 相关技术
- Atitit 业务流程执行引擎的实现 目录 1.1. 引擎实现语言java js php等	1 1.2. 流程语言 xml sql js等 业务流程定义语言规范总结	1 1.3. 实体方法定义	2
- Atitit 招人之道 招不到人怎么办 attilax著 1. 适当降低要求 水至清则无鱼 太严格了就没有人了	2 1.1. 学历可以提升 可以开个企业内部学院快速提升学历	2 1.2. ,能力可以
- Atitit.python web环境的配置 attilax 总结
- Atitit。 《吠陀》 《梨俱吠陀》overview 经读后感 是印度上古时期一些文献的总称
- atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform
- paip.python错误解决6