通过 bootstrap nav pills 进行导航的简单方法

Question

我有一个 bootstrap nav pills sample here 绘制为，

<ul class="nav nav-pills nav-stacked">
        <li class="active"><a data-toggle="pill" href="#sec1"><b>Section 1</b></a></li>
        <li><a data-toggle="pill" href="#sec2"><b>Section 2</b></a></li>
        <li><a data-toggle="pill" href="#sec3"><b>Section 3</b></a></li>
</ul>

一旦用户使用 jquery 作为 given here 单击选项卡内容中的下一个按钮，我就可以转到下一个选项卡。除了这个使用 angularjs 或任何其他方法的示例之外，还有其他最简单的方法吗？

Answer 1

您可以将 class .next 添加到下一个按钮并使用选项卡 ID 和 href:-

$(document).ready(function() {
  $(".next").click(function() {
    var tab = $(this).closest('.tab-pane');
    $('#' + tab[0].id + ', .nav-pills li').removeClass('active');
    $('.nav-pills li a[href="#' + tab.next()[0].id + '"]').parent().addClass('active');
    tab.next().addClass('active');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-3" style="padding-right: 0px;">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a data-toggle="pill" href="#sec1"><b>Section 1</b></a>
        </li>
        <li><a data-toggle="pill" href="#sec2"><b>Section 2</b></a>
        </li>
        <li><a data-toggle="pill" href="#sec3"><b>Section 3</b></a>
        </li>
      </ul>
    </div>
    <div class="col-xs-9">
      <div class="tab-content">
        <div id="sec1" class="tab-pane active">
          <p>Section 1 tab 1</p>
          <div class="text-right">
            <button class="btn btn-primary btn-sm next">Next</button>
          </div>
        </div>
        <div id="sec2" class="tab-pane">
          <p>Section 2 tab 2</p>
          <div class="text-right">
            <button class="btn btn-primary btn-sm next">Next</button>
          </div>
        </div>
        <div id="sec3" class="tab-pane">
          <p>Section 3 tab 3</p>
          <div class="text-right">
            <button class="btn btn-primary btn-sm">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

通过 bootstrap nav pills 进行导航的简单方法

Simple way to navigate through bootstrap nav pills

jquery

angularjs

twitter-bootstrap

navigation

nav-pills