Simple way to navigate through bootstrap nav pills

Question

I have a bootstrap nav pills sample here drawn as,

<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>

I can go to next tab once user clicks on next button inside the tab content by using jquery as given here. Is there any other simplest way rather than this example using angularjs or any other methods?

Answer 1

You could add a class .next to the next buttons and work from the tab id and 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>