javascript - 如何使单个标签不可点击？

Question

我使用以下代码创建单个选项卡，但我也希望一个选项卡成为一个链接，而不是一个选项卡。

<navi>
    <ul class="tabs">
        <li><a href="/" title="linkxtab 1">link 1</a></li>
        <li c-tab="tab-2" title="tab 2">link 2</li>
        <li c-tab="tab-3" title="tab 3">link 3</li>
        <li c-tab="tab-4" title="tab 4">link 4</li>
    </ul>
</navi>

每当我点击“链接 1”时，其他选项卡就会消失，因为代码显然认为我想激活这个实际上应该是链接的选项卡，因此没有内容。当我点击 li 而不是 a 时会发生这种情况，因为我的“tabsmenu”样式在 li 和 之间有一些填充一个在里面。

现在我的问题如下:是否有一个 CSS 代码可以只启用这个 li 而不禁用它的 a？我已经尝试了 pointer-event:none;，但这当然会导致阻止 li 和 a 中的所有内容。

我将此脚本用于选项卡:

$('.tabs li').click(function(){
    var tab = $(this).attr('c-tab');
    $('.tabs li').removeClass('selected');
    $('.tabscontent').removeClass('selected');

    $(this).addClass('selected');
    $("#"+tab).addClass('selected');
     return false;
});

有没有办法通过用某些东西重命名它来以某种方式只用一段代码阻止一个这个标签？

谢谢!

//注意:我仍然希望这些选项卡可以工作，只有名为“linkxtab 1”的选项卡不应该工作，除了它的链接。

Answer 1

试试这个:

.tabs > li {
    pointer-events: none;
}

.tabs > li > a{
    pointer-events: all!important;
}