如何检查 li.a 选项卡是否处于活动状态

Question

<ul class="nav">
<li class role="presentation"><a href="#tab-aaa" data-toggle="tab">aaa </a></li>
<li class="active" role="presentation"><a href="#tab-bbb" data-toggle="tab">bbb </a></li>
<li class role="presentation"><a href="#tab-ccc" data-toggle="tab">ccc </a></li>
</ul>

如上面的代码，bbb 选项卡现在处于活动状态。如何编写jquery来检查ccc选项卡是否处于活动状态，然后做点什么？

Answer 1

你可以

尝试这样的事情：

$('ul.nav li').click(function() {
   $('ul.nav li').removeClass('active');
   $(this).addClass('active');
   if($(this).find('a').attr('href') == '#tab-ccc') {
       alert('ccc clicked');
   }
});

例 ： https://jsfiddle.net/hs5L5Ls6/4/

Answer 2

你也可以简单地使用 jQuery 来做到这一点：

if($('ul.nav li:last-child').hasClass('active')){
// do something
}

不幸的是，除非您在 li 元素上有 class/id，否则您无法通过其子 href 值专门选择它。如果你能给他们 Id - 那么你可以做这样的事情：

<ul class="nav">
<li id="aaa" class role="presentation"><a href="#tab-aaa" data-toggle="tab">aaa </a></li>
<li id="bbb" class="active" role="presentation"><a href="#tab-bbb" data-toggle="tab">bbb </a></li>
<li id="ccc" class role="presentation"><a href="#tab-ccc" data-toggle="tab">ccc </a></li>
</ul>

然后更具体地选择如下：

if($('ul.nav li#ccc').hasClass('active')){
// do something
}

这是给你的一个工作小提琴：https://jsfiddle.net/nvLed1y5/4/

编辑

我实际上想到了一个更好的解决方案，它既具体又不需要您将代码添加到 HTML 中：如果您使用选择器并检查它是否存在，则可以判断正确的选择器是否处于活动状态。喜欢这个：

if($('ul.nav li.active a[href="#tab-ccc"]').length > 0){
// do something
}

这也是一个小提琴：https://jsfiddle.net/5b40qzkb/1/