Question

我在Bootstrap选项卡面板中创建了一个“Next”按钮，该按钮会跳到序列中的下一个选项卡，但我希望它跳到下一个 visible 选项卡，即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>

小提琴：http://jsfiddle.net/tyLje3jz/

正如您将看到我包括“not（”。hide“）”。

这并没有像预期的那样工作，因为它会一直到＃tab3但是＃tab3上的按钮什么都不做我想要它做的是跳到＃tab5，因为#tab4有“hide”类。

根据我的理解，“。next（'li'）。not（'。hide'）”应该在没有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()会删除集合中符合条件的所有项目。因此，在隐藏选项卡之前，您的代码只会抓取隐藏的选项卡，然后立即将其排除。相反，你需要做的是找到所有匹配的项目，排除任何隐藏的项目，然后选择第一个。

Stack Snippets中的演示

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

Bootstrap跳到下一个可见选项卡

1 个答案:

Stack Snippets中的演示