如何通过分页更改Bootstrap选项卡

问题描述：

嗨，我是bootstrap和jQuery的新手。我创建了一个引导Tab，它工作正常。标签由标题改变，但我也需要分页来改变Tab，这是我无法做到的。以下是我的情况，如何通过分页更改Bootstrap选项卡

Tab 1 --> next button --> go to tab 2 
Tab 1 <-- previous -- Tab 2 -- next ---> Tab 3 
Tab 2 <-- previous -- Tab 3

任何人都可以帮忙。以下是我的HTML。这只是一个例子，我可以有不同数量的选项卡。

<div class="row"> 

    <!-- tabs --> 
    <div class="col-md-3 col-sm-3"> 
     <ul class="nav nav-tabs nav-stacked nav-alternate"> 
      <li> 
       <a href="#tab_1" data-toggle="tab">Question - 1 </a> 
      </li> 
      <li> 
       <a href="#tab_2" data-toggle="tab">Question - 2 </a> 
      </li> 
      <li> 
       <a href="#tab_3" data-toggle="tab">Question - 3 </a> 
      </li> 
     </ul> 
    </div> 

    <!-- tabs content --> 
    <div class="col-md-9 col-sm-9"> 
     <div class="tab-content tab-stacked nav-alternate"> 
      <div id="tab_1" class="tab-pane active"> 
       <div class="panel panel-default"> 
        <div class="panel-body"> 
         <p>Some Text Tab 1</p> 
        </div> 
       </div> 
       <ul class="pager"> 
        <li class="next"><a class="radius-0" href="#" data-toggle="tab">Next &rarr;</a></li> 
       </ul> 
      </div> 
      <div id="tab_2" class="tab-pane"> 
       <div class="panel panel-default"> 
        <div class="panel-body"> 
         <p>Some Text Tab 2</p> 
        </div> 
       </div> 
       <ul class="pager"> 
        <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li> 
        <li class="next"><a class="radius-0" href="#">Next &rarr;</a></li> 
       </ul> 
      </div> 
      <div id="tab_3" class="tab-pane"> 
       <div class="panel panel-default"> 
        <div class="panel-body"> 
         <p>Some Text Tab 3</p> 
        </div> 
       </div> 
       <ul class="pager"> 
        <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

</div>

答

更新jQuery脚本附加到previouse /下一个环节。

已更新class="active"改为问题-1的li标记。

<!-- tabs --> 
<div class="col-md-3 col-sm-3"> 
    <ul class="nav nav-tabs nav-stacked nav-alternate"> 
     <li class="active"> 
      <a href="#tab_1" data-toggle="tab">Question - 1 </a> 
     </li> 
     <li> 
      <a href="#tab_2" data-toggle="tab">Question - 2 </a> 
     </li> 
     <li> 
      <a href="#tab_3" data-toggle="tab">Question - 3 </a> 
     </li> 
    </ul> 
</div> 

<!-- tabs content --> 
<div class="col-md-9 col-sm-9"> 
    <div class="tab-content tab-stacked nav-alternate"> 
     <div id="tab_1" class="tab-pane active"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        <p>Some Text Tab 1</p> 
       </div> 
      </div> 
      <ul class="pager"> 
       <li class="next"><a class="radius-0" href="#" data-toggle="tab">Next &rarr;</a></li> 
      </ul> 
     </div> 
     <div id="tab_2" class="tab-pane"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        <p>Some Text Tab 2</p> 
       </div> 
      </div> 
      <ul class="pager"> 
       <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li> 
       <li class="next"><a class="radius-0" href="#">Next &rarr;</a></li> 
      </ul> 
     </div> 
     <div id="tab_3" class="tab-pane"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        <p>Some Text Tab 3</p> 
       </div> 
      </div> 
      <ul class="pager"> 
       <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

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

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

如何通过分页更改Bootstrap选项卡

相关推荐