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?

@Satej That is what I asked is there any better ways using angularjs or something other methods. Myself used jquery in my sample. — mpsbhat, Mar 07 '16 at 13:05

score 1 · Accepted Answer · answered Mar 07 '16 at 11:39

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>

Simple way to navigate through bootstrap nav pills

1 Answers1