技術頻道導航
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.kpgnf.tw" >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熱文
    • 站長推薦
    财神捕鱼128 广东新11选5直播 天天棋牌手机版本大全 广西11选5前3 腾游娱乐中心s 上海时时彩开奖直播网 大富豪棋牌下载 新浪足彩网 极速11选5软件下载 甘肃11选5走势图基本 网上棋牌平台代理怎样