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>

每当我点击＆＃39;链接1＆＃39;时，其他标签就会消失，因为代码显然认为我想激活此标签，实际上应该是一个链接，因此没有内容。当我点击 li 而不是 a 时会发生这种情况，因为我的＆＃39; tabsmenu＆＃39;样式在 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;
});

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

谢谢！

//注意：我仍然希望标签能够正常工作，而且只有标签名为＆＃39; linkxtab 1＆＃39;不应该工作，除了它的链接。

Answer 1

试试这个：

＆＃13;

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

＆＃13;

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;       
});

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

3 个答案: