|
|
|
|
|
本文將介紹如何使用jQuery使HTML錨鏈接(HyperLink)不可點(diǎn)擊或禁用。
使HTML錨鏈接(HyperLink)不可點(diǎn)擊或禁用
HTML禁用(disabled)屬性不適用于HTML錨鏈接(HyperLink),它們?nèi)匀皇强牲c(diǎn)擊的。
以下HTML標(biāo)記由三個(gè)HTML錨鏈接(HyperLink)和一個(gè)Button組成。單擊Button時(shí),將執(zhí)行jQuery Click事件處理程序。
在此Click事件處理程序中,將檢查單擊的Button的值,如果Button的值為Disable,則禁用HTML Anchor Links(HyperLink),即不可單擊,如果Button的值為Enable,則為HTML Anchor Links( HyperLink)已啟用,即可點(diǎn)擊。
<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://m.gazebo2go.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)不可點(diǎn)擊或禁用
為了禁用HTML Anchor Link(HyperLink),將其HREF屬性的值復(fù)制到REL屬性,并將HREF屬性的值設(shè)置為空J(rèn)avaScript函數(shù)。
$("a").each(function () {
$(this).attr("rel", $(this).attr("href"));
$(this).attr("href", "javascript:;");
});
這使得HTML錨鏈接(HyperLink)被禁用,即不可點(diǎn)擊。
為了啟用HTML Anchor Link(HyperLink),將其REL屬性的值復(fù)制回HREF屬性,并刪除REL屬性。
$("a").each(function () {
$(this).attr("href", $(this).attr("rel"));
$(this).removeAttr("rel");
});
這使得HTML錨鏈接(HyperLink)再次啟用,即可點(diǎn)擊。