使用jQuery使HTML锚链接(HyperLink)不可点击或禁用 - js技术_卡卡网
技术频道导航
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.livestreamsv.com" >livestreamsv.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热文
    • 站长推荐
    南粤风采36选7走势图 河南福彩22选5五位走势图 福彩双色球在线缩水 福彩东方6 1走势图 体彩排列3走势图 河北福彩20选5走势图 河北福彩20选5走势图 福彩双色球连号走势图齐鲁风采23选5重号分布图 体彩排列3类型走势图 福彩双色球除七走势图 体彩超级大乐透中奖规则 齐鲁风采23选5走势图 体彩排列5双期走势图 体彩排列5走势图 江苏体彩七位数游戏规则 福彩双色球连号走势图楚天风采22选5除五走势图 体彩排列3双期走势图 体彩22选5重号分布图 广东体育彩票36选7走势图 北京赛车PK10开奖结果

    about:blank "); rng.document.write(""); rng.document.close(); } //********************************************************* about:blank "); rng.document.write(""); rng.document.close(); } function copySuccess(){ alert("复制代码成功,您现在可以把它粘贴到任何地方了。"); } jQuery(document).ready(function () { setTimeout(function () { var jq = {}; $('[_copy]').hover(function () { var j_nav = $(this).attr('_copy'); clearTimeout(jq[j_nav + '_timer']); jq[j_nav + '_timer'] = setTimeout(function () { $('#' + j_nav).stop(true, true).fadeIn(200); },150); },function () { var j_nav = $(this).attr('_copy'); clearTimeout(jq[j_nav + '_timer']); jq[j_nav + '_timer'] = setTimeout(function () { $('#' + j_nav).stop(true, true).fadeOut(200); },150); }); },3000); }); //*********************************************************