如何使用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

您可以向返回false的链接添加onclick处理程序.

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的