how to display next bootstrap tab on button click
<p>I want to display next bootstrap tabs one by one on button click.Right now on button click only the second tab is displayed as i have hard coded it what should be in place of the href="#second" how to get the particular id in the href?When I first click on other tabs instead of  clicking on the first tab which is active then the user must get the error message that ' the user have to click the first tab and then the other tabs' using noty plugin means disable the other tabs except for the first tab on page load .</p>

<p>here is my code</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;Bootstrap Case&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function(){

        $('#changetabbutton').click(function(e){
            e.preventDefault();

            $('#mytabs a[href="#second"]').tab('show');
        });

    });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;

    &lt;!-- Nav tabs --&gt;
    &lt;ul id="mytabs" class="nav nav-tabs" role="tablist"&gt;
      &lt;li class="active"&gt;
          &lt;a href="#first" role="tab" data-toggle="tab"&gt;
              &lt;i class="fa fa-home"&gt;&lt;/i&gt; First tab
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#second" role="tab" data-toggle="tab"&gt;
          &lt;i class="fa fa-user"&gt;&lt;/i&gt; Second tab
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#third" role="tab" data-toggle="tab"&gt;
              &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; Third tab
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#fourth" role="tab" data-toggle="tab"&gt;
              &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; Fourth tab
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#fourth" role="tab" data-toggle="tab"&gt;
              &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; Fifth tab
          &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

    &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane fade active in cont" id="first"&gt;
          &lt;h2&gt;First tab&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane fade cont" id="second"&gt;
          &lt;h2&gt;Second tab&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane fade cont" id="third"&gt;
          &lt;h2&gt;Third tab&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane fade cont" id="third"&gt;
          &lt;h2&gt;Fourth tab&lt;/h2&gt;
      &lt;/div&gt;
       &lt;div class="tab-pane fade cont" id="third"&gt;
          &lt;h2&gt;Fifth tab&lt;/h2&gt;
      &lt;/div&gt;

    &lt;/div&gt;
     &lt;button type="button" id="changetabbutton" class="btn btn-primary "&gt;Set next tab&lt;/button&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>