javascript - Bootstrap 跳到下一个可见选项卡

Question

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

我从Bootstrap Tabs: Next & Previous Buttons for Forms中获取的原始代码并改编如下:

<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>

fiddle :http://jsfiddle.net/tyLje3jz/

正如您将看到的，我包含了“not(".hide")”。

这并没有像预期的那样工作，因为它会到达 #tab3，但是当我想让它跳到 #tab5 时，#tab3 上的按钮什么也不做，因为 #tab4 有“隐藏”类。

根据我的理解，“.next('li').not('.hide')”应该寻找下一个没有隐藏类的“li”标签，在本例中为#tab5。

我做错了什么？

Answer 1

首先，您需要在点击处理程序中使用类 .btnNext 而不是 id #btnNext。

基于问题trying to get next item not having a specific class ，你可以这样做:

$('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');

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

堆栈片段中的演示

$(function() {
  $('.btnNext').click(function() {
    $('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');
  });
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<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>