Javascript 引导跳到下一个可见选项卡

我在引导选项卡面板中创建了一个“下一步”按钮，它会跳到序列中的下一个选项卡，但是我希望它跳到下一个可见选项卡，即li标记没有“隐藏”类的位置

我从原始代码中选取并改编如下：

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Products</a>
  </li>
  <li><a href="#tab2" data-toggle="tab">Sizes</a>
  </li>
  <li><a href="#tab3" data-toggle="tab">Quantities</a>
  </li>
  <li class="hide"><a href="#tab4" data-toggle="tab">Shipping</a>
  </li>
  <li><a href="#tab5" data-toggle="tab">Summary</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab2">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab3">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab4">
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane" id="tab5">
    <a class="btn btn-danger btnClose">Close</a>
  </div>
</div>


<script type="text/javascript">
$(document).ready(function() {
    $('.btnNext').click(function() {
      $('.nav-tabs > .active').next('li').not(".hide").find('a').trigger('click');
    });
});
</script>

正如您将看到的，我包括了“not（“.hide”）”

这并没有像预期的那样有效，因为它会一直运行到#tab3，但当我希望它跳到#tab5时，#tab3上的按钮没有任何作用，因为#tab4有“隐藏”类

根据我的理解，“.next（'li'）。not（'.hide'）”应该查找不带hide类的下一个“li”标记，在本例中是#tab5

我做错了什么？
首先，您需要在单击处理程序中使用类
.btnNext
而不是id
#btnNext

根据这个问题，你可以这样做：

$（'.nav tabs>.active'）.nextAll（'li'）.not（'hide'）.first（）.find（'a'）.trigger（'click'）；

问题是
.next（）
将获取单个元素，而
.not（）
将删除集合中与条件匹配的任何项。因此，就在隐藏选项卡之前，您的代码只会抓住隐藏选项卡，然后立即将其排除。相反，您需要做的是找到所有匹配项，排除任何隐藏项，然后选择第一个

堆栈片段中的演示

$（函数（）{
$（'.btnNext'）。单击（函数（）{
$（'.nav tabs>.active'）.nextAll（'li'）.not（'.hide'）.first（）.find（'a'）.trigger（'click'）；
});
});








下一个
下一个
下一个
下一个
接近
非常感谢！我知道这很简单！点击处理程序是一个打字错误-谢谢你指出它。