如何使用 JavaScript 禁用 li 标签答案

【问题标题】：how to disable a li tag using JavaScript如何使用 JavaScript 禁用 li 标签
【发布时间】：2012-10-22 03:47:07
【问题描述】：

我在我的页面上使用以下 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;

但它似乎不起作用。

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

我做错了吗？

【问题讨论】：

有些事情你没有告诉我们。 li 项目没有默认的点击处理程序。
我想你的意思是禁用 <a> 而不是 <li>。
@AlvinWong - 我正在使用来自unraveled.com/publications/assets/css_tabs/index.html 的标签 css，我希望能够禁用其中一个标签然后能够再次重新启用它

标签： javascript html

【解决方案1】：

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

【讨论】：

+1 以获得完美答案，在我结束一些药物治疗后，我也能够禁用所有 li 和嵌套 li。

【解决方案2】：

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

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

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

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

【讨论】：

我想我可以使用它.. 但我希望禁用我的一个选项卡.. 我正在使用这个 css 选项卡并希望禁用其中一个选项卡然后重新启用它 - unraveled.com/publications/assets/css_tabs/index.html
@Aaron 因为这完全是用 css 完成的，所以这是你最好的选择。没有办法禁用一开始就无法禁用的东西。
@Daedalus 谢谢，这解释了为什么我不能这样做。我只需要这样做。
@Aaron 你可以让你的禁用/启用功能同时做这两个。添加/删除一个 CSS 类以正确设置选项卡的样式，并使用上面的 JS 实际禁用它:)
@AdamHeath- 如何隐藏同一个 li？

【解决方案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。我不能为此使用任何 jQuery。
@Aaron jQuery 是 javascript。
我明白，但它需要一个 100kb+ 的文件，当我在我的设备上使用它时，我将使用它，加载时间很长，当我不使用这个 jQuery 文件时它加载速度更快。我宁愿用 jQuery 做，但我不能用这个。