|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
使用jQuery使HTML錨鏈接（HyperLink）不可點擊或禁用
作者:admin 時間:2019-5-8 13:12:44 瀏覽:本文將介紹如何使用jQuery使HTML錨鏈接（HyperLink）不可點擊或禁用。
使HTML錨鏈接（HyperLink）不可點擊或禁用
HTML禁用(disabled)屬性不適用于HTML錨鏈接（HyperLink），它們仍然是可點擊的。
使用jQuery使HTML錨鏈接（HyperLink）不可點擊或禁用
以下HTML標記由三個HTML錨鏈接（HyperLink）和一個Button組成。單擊Button時，將執(zhí)行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.howtostagehomes.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）
為了禁用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
