如何使單個選項卡不可點擊？

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和a之間有一些填充。

現在我的問題是：是否有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; } 

Answer 2

如果有任何a在點擊li然后重定向到href的鏈接。

$('.tabs li').click(function () {
    if ($(this).find('a').length) {
        window.location.href = $(this).find('a').attr('href');
    }

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

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

Answer 3

您只需執行以下操作即可檢查元素單擊是否為錨點，然后繼續其余操作。

$('li').on('click',function(e)
{
    var target = $(e.target);
      if(!target.is("a"))
      return false;       
});