title: How to change Bootstrap tab by pagination
body: <p>Hi I am new to bootstrap and jQuery. I have created a bootstrap Tab, which is working fine. The tabs are changing by header, but I also needs pagination to change Tab, which I am not able to do. Following is my scenario,</p>
  
  <pre><code>Tab 1 --&gt; next button --&gt; go to tab 2
  Tab 1  &lt;-- previous -- Tab 2 -- next ---&gt; Tab 3
  Tab 2  &lt;-- previous -- Tab 3
  </code></pre>
  
  <p>Can any one help. Following is my HTML. This is just an example, I can have variable number of tabs.</p>
  
  <pre><code>&lt;div class="row"&gt;
  
      &lt;!-- tabs --&gt;
      &lt;div class="col-md-3 col-sm-3"&gt;
          &lt;ul class="nav nav-tabs nav-stacked nav-alternate"&gt;
              &lt;li&gt;
                  &lt;a href="#tab_1" data-toggle="tab"&gt;Question - 1 &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#tab_2" data-toggle="tab"&gt;Question - 2 &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#tab_3" data-toggle="tab"&gt;Question - 3 &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- tabs content --&gt;
      &lt;div class="col-md-9 col-sm-9"&gt;
          &lt;div class="tab-content tab-stacked nav-alternate"&gt;
              &lt;div id="tab_1" class="tab-pane active"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;p&gt;Some Text Tab 1&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;ul class="pager"&gt;
                    &lt;li class="next"&gt;&lt;a class="radius-0" href="#" data-toggle="tab"&gt;Next &amp;rarr;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="tab_2" class="tab-pane"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;p&gt;Some Text Tab 2&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;ul class="pager"&gt;
                     &lt;li class="previous"&gt;&lt;a class="radius-0" href="#"&gt;&amp;larr; Previous&lt;/a&gt;&lt;/li&gt;
                     &lt;li class="next"&gt;&lt;a class="radius-0" href="#"&gt;Next &amp;rarr;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="tab_3" class="tab-pane"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;p&gt;Some Text Tab 3&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;ul class="pager"&gt;
                     &lt;li class="previous"&gt;&lt;a class="radius-0" href="#"&gt;&amp;larr; Previous&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>