javascript - 如何使用 JavaScript 禁用 li 标签

Question

我在我的页面上使用以下 HTML：

<ul id="tabnav">

        <li id="tab_a" class="tab1"><a href="tab1.htm">Tab a</a></li>
        <li id="tab_b" class="tab2"><a href="tab2.htm">Tab b</a></li>
        <li id="tab_c" class="tab3"><a href="tab3.htm">Tab c</a></li>
    </ul>

我想要做的是让您无法使用javascript单击第三个选项卡，然后我希望稍后能够单击第三个选项卡。

所以我尝试在 JavaScript 函数中使用以下 JavaScript：

document.getElementById("tab_c").style.enabled = false;

但是它似乎没有用。

我希望它会禁用它，所以你不能点击它。

难道我做错了什么？

Answer 1

//css
.disabled{
    pointer-events:none;
    opacity:0.4;
}
// jqvery
$("li a").addClass('disabled');
// remove .disabled when you are done

Answer 2

您可以将 onclick 处理程序添加到返回 false 的链接。

document.getElementById("tab_c").childNodes[0].onclick = function() {return false;};​

只是选择第childNodes[0]一个孩子，在这种情况下是<a>

例如http://jsfiddle.net/zYSeF/

Answer 3

使用 jQuery 库，你可以做这样的事情。

$('a').on('click', function() {
    return !$(this).attr('disabled');
});

要切换被禁用，您可以简单地执行此操作。

$('#tab_c a').attr('disabled', true); //add
$('#tab_c a').removeAttr('disabled'); //remove

jQuery