技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

使用jQuery使HTML锚链接(HyperLink)不可点击或禁用

作者:admin    时间:2019-5-8 13:12:44    浏览:

本文将介绍如何使用jQuery使HTML锚链接(HyperLink)不可点击或禁用。

使HTML锚链接(HyperLink)不可点击或禁用

使HTML锚链接(HyperLink)不可点击或禁用

HTML禁用(disabled)属性不适用于HTML锚链接(HyperLink),它们仍然是可点击的。

使用jQuery使HTML锚链接(HyperLink)不可点击或禁用

以下HTML标记由三个HTML锚链接(HyperLink)和一个Button组成。单击Button时,将执行jQuery Click事件处理程序。

在此Click事件处理程序中,将检查单击的Button的值,如果Button的值为Disable,则禁用HTML Anchor Links(HyperLink),即不可单击,如果Button的值为Enable,则为HTML Anchor Links( HyperLink)已启用,即可点击。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>

<a href="http://www.webkaka.com" >webkaka.com</a><br />

<hr />
<input type="button" id="btnEnableDisable" value="Disable" />

<script type="text/javascript">
$(function () {
    $("#btnEnableDisable").click(function () {
        if ($(this).val() == "Disable") {
            $(this).val("Enable");
            $("a").each(function () {
                $(this).attr("rel", $(this).attr("href"));
                $(this).attr("href", "javascript:;");    
            });
        } else {
            $(this).val("Disable");
            $("a").each(function () {
                $(this).attr("href", $(this).attr("rel"));
                $(this).removeAttr("rel");
            });
        }
    });
});
</script>

</body>
</html>

效果如图:

使HTML锚链接(HyperLink)不可点击或禁用

使HTML锚链接(HyperLink)不可点击或禁用

execcodegetcode

禁用HTML锚链接(HyperLink)

为了禁用HTML Anchor Link(HyperLink),将其HREF属性的值复制到REL属性,并将HREF属性的值设置为空JavaScript函数。

$("a").each(function () {
  $(this).attr("rel", $(this).attr("href"));
  $(this).attr("href", "javascript:;");
});

这使得HTML锚链接(HyperLink)被禁用,即不可点击。

启用HTML锚链接(HyperLink)

为了启用HTML Anchor Link(HyperLink),将其REL属性的值复制回HREF属性,并删除REL属性。

$("a").each(function () {
  $(this).attr("href", $(this).attr("rel"));
  $(this).removeAttr("rel");
});
 

这使得HTML锚链接(HyperLink)再次启用,即可点击。

标签: HyperLink  
相关文章
    • IT热文
    • 站长推荐