通过引导导航药丸导航的简单方法答案

【问题标题】：Simple way to navigate through bootstrap nav pills通过引导导航药丸导航的简单方法
【发布时间】：2016-03-07 11:21:21
【问题描述】：

我有一个引导导航药丸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 或任何其他方法的示例之外，还有其他最简单的方法吗？

【问题讨论】：

angular/js 在哪里？
@Satej 这就是我问的问题，是否有更好的方法使用 angularjs 或其他方法。我自己在我的示例中使用了 jquery。

标签： jquery angularjs twitter-bootstrap navigation nav-pills

【解决方案1】：

您可以将 .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>

【讨论】：