如何在javascript中让一个链接变成灰色，不可点击？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在javascript中让一个链接变成灰色，不可点击？相关的知识，希望对你有一定的参考价值。
在做分页的过程中遇到了这个问题，比如在第一页时“上一页”的链接就变灰，快点，紧急紧急！
直接试用disable不同浏览器及版本的兼容例外多,不建议直接disable超链接.
以下通过调整样式和行为的方式实现上述需求:
定义一个超链接"变成"普通html文本的样式
在某个行为中触发"变灰"
在原链接的事件中加入如果已经有"变灰"的class则直接返回
在另外的行为中恢复"正常"
以下为模拟的代码:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
/* "变灰"效果*/
.disableHref
cursor:default;
color:#E5E0E0;
text-decoration:none;
</style>
<script>
// 禁用超链接-"变灰"
function disableHref()
var hrefDom = document.getElementById("testHref");
hrefDom.className+=" disableHref";
// 启用超链接-"正常"
function enableHref()
var hrefDom = document.getElementById("testHref");
hrefDom.className=hrefDom.className.replace(" disableHref","");
// 超链接点击事件
function hrefClick()
var target=event.target;
if(target.className.indexOf("disableHref")>-1)
// 加入判断,有"变灰"时返回
return false;
// do something u need
// for example
alert("jump previous");
</script>
</HEAD>
<BODY>
<a href="javascript:;" id="testHref" onclick="hrefClick()" class="ttt">test href</a>
<input type="button" id="btnDisableHref" onclick="disableHref()" value="Disable href" />
<input type="button" id="btnEnableHref" onclick="enableHref()" value="Enable href" />
</BODY>
</HTML> 参考技术A 根据经验，通常这个只是把字体变成灰色，不设置链接，而不是用JS控制，JS可控制文本输入框，按钮等，如果一定要用JS控制的话，试试这个，但很多浏览器会失败：给链接加个ID如：<a href=" http://www.baidu.com" id="yourHrefId">fdf</a>再写个JS
<script language="javascript">
document.getElementById("yourHrefId").disabled=true
</script> 参考技术B 后台输出 的时候 不要给上一页加链接这个和客户端无关
以上是关于如何在javascript中让一个链接变成灰色，不可点击？的主要内容，如果未能解决你的问题，请参考以下文章
在 Flutter 中让 Row 子节点尽可能宽（父节点的剩余宽度）？
android如何实现imageview默认是灰色,被点击后变成蓝色,（详情请看图片）并保持是蓝色