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>

E.g。 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

如何使用JavaScript禁用li标签

3 个答案: