Bootstrap选项卡不能使用下一个按钮切换

Question

我想切换下一个和上一个按钮的标签，但是当我点击按钮时，内容正在切换，但不是“活动标签”。 这里有一个小提琴：http://jsfiddle.net/ZazaAngular/a5ed16ma/2/

<div class="container">
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li id="tab1" class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li  id="tab2"><a href="#orange" data-toggle="tab">Orange</a></li>
        <li id="tab3"><a href="#yellow" data-toggle="tab">Yellow</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
               <div class="row form-group">
                   <button class="btn btn-primary btn-xs" data-toggle="tab" data-target="#orange">
                   <span class="icon-arrow-next"></span> Next</button>
               </div>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
               <div class="row form-group">
                  <button class="btn btn-primary btn-xs" data-toggle="tab" data-target="#yellow">
                  <span class="icon-arrow-next"></span> Next</button>
                </div>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
    </div>
</div>

感谢您的帮助

Answer 1

你必须做这样的事情

以下是您的工作代码：http://www.bootply.com/120472 或者此代码http://jsfiddle.net/4ns0mdcf/

HTML：

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" 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>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

JS：

 $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

Answer 2

在Bootstrap 4中，active类放在a标记内，而不是li标记内（如Bootstrap 3中所示）。

Bootstrap 3中的选项卡示例：

<ul class="nav nav-tabs">
  <li class="active">  <!-- active class is an attribute of the <li> element! -->
    <a href="#tab1" data-toggle="tab">Tab 1</a>
  </li>
  <li>
    <a href="#tab2" data-toggle="tab">Tab 2</a>
  </li>
</ul>

Bootstrap 4中的标签示例：

<ul class="nav nav-tabs card-header-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab">Tab 1</a>
    <!-- active class is an attribute of the <a> element! -->
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2" role="tab">Tab 2</a>
  </li>
</ul>

有关详细信息，请参阅https://getbootstrap.com/docs/4.0/components/navs/#tabs。

因此，需要调整JS以进行正确的DOM遍历。使用jQuery，可以选择具有btn-next类的所有按钮，并设置一个遍历DOM的click事件到下一个选项卡，并触发点击它。

JS：

$('.btn-next').click(function() {
  $('.nav-item > .active').parent().next('li').find('a').trigger('click');
});

按钮的HTML：

<button class="btn-next">Next</button>

我在Codeply上看到了类似的解决方案：https://www.codeply.com/go/dPkMlefHpl

希望这有帮助！