Bootstrap：下一个按钮应该显示下一个选项卡答案

【问题标题】：Bootstrap: next button should display next tabBootstrap：下一个按钮应该显示下一个选项卡
【发布时间】：2016-02-08 07:58:22
【问题描述】：

我想在引导选项卡导航中实现一个自定义的下一步按钮。

单击下一个按钮时，下一个选项卡应显示为活动状态。如果到达最后一个选项卡，它应该从第一个选项卡开始。

Bootply snippet

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我正在使用@DelightedD0D 提供的解决方案。当页面加载时，控件总是停在最后一个选项卡上。如果你想解决这个问题，请更新以下函数

$(function () {
$('#myTab a:last').tab('show');
})

到

$(function () {
$('#myTab a:active').tab('show');
})

【讨论】：

通过使用@DelightedD0D 代码，如何在最后一个选项卡上停止它？并在单击第一个选项卡上的最后一个按钮时阻止它返回到最后一个选项卡？有什么想法吗？

【解决方案2】：

我最近需要这个功能，这就是我最终得到的：

$('.change-tab').click(function() {
  var $this = $(this);
  var $nav = $($this.data('target'))
  var $tabs = $nav.find('li');
  var $curTab = $tabs.filter('.active');
  var cur = $tabs.index($curTab);
  if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a');
  else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a');
  $showTab.tab('show');
});



// normal tabs code
$('#myTab a').click(function (e) {
	 e.preventDefault();
	 $(this).tab('show');
});

$(function () {
$('#myTab a:last').tab('show');
})

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a>
    </li>
    <li><a href="#profile">Profile</a>
    </li>
    <li><a href="#messages">Messages</a>
    </li>
    <li><a href="#settings">Settings</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home">Home content...</div>
    <div class="tab-pane" id="profile">Content here...</div>
    <div class="tab-pane" id="messages">Messages...</div>
    <div class="tab-pane" id="settings">Settings...</div>
  </div>
</div>


<div class="row">
  <div class="col-md-12">
    <div class="btn-toolbar pull-right">
      <div class="btn-group">
        <button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button>
        <button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </div>
</div>

【讨论】：

选项卡在此处不再可点击。
@herrh 我的示例中没有包含常规选项卡代码，抱歉。我在上面添加了它，以便您可以看到它在正常使用情况下工作

【解决方案3】：

这解决了你的问题

$('.next-tab').click(function(e){
  if($('.nav-tabs > .active').next('li').hasClass('next-tab')){
    $('.nav-tabs > li').first('li').find('a').trigger('click');
  }else{
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
  }
  e.preventDefault();
});

http://www.bootply.com/XYpxMIgink

【讨论】：