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/

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

2 个答案: