title: bootstrap multiple nav tabs for tab content
body: <p>I'm trying to create a type of pagination for bootstrap tab, i figured an easy approach would be to create two nav tabs with html and then try to style the second nav up to look like the carousel pagination. However im currently having problems trying to implement it so that both nav-tabs work together. As I can't manage to get it so if I click on one tab the other will appear active. </p>
  
  <p><strong><a href="http://jsfiddle.net/isherwood/3x6ekc5s/3/" rel="nofollow noreferrer">Here is my Fiddle</a></strong> however I can't manage to get it working correctly.</p>
  
  <pre><code>&lt;div&gt;
  
  &lt;!-- Nav tabs --&gt;
  &lt;ul class="nav nav-tabs" role="tablist"&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#home" aria-controls="home" role="tab" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation"&gt;&lt;a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation"&gt;&lt;a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation"&gt;&lt;a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Tab panes --&gt;
  &lt;div class="tab-content"&gt;
  &lt;div role="tabpanel" class="tab-pane active" id="home"&gt;1&lt;/div&gt;
  &lt;div role="tabpanel" class="tab-pane" id="profile"&gt;2&lt;/div&gt;
  &lt;div role="tabpanel" class="tab-pane" id="messages"&gt;3&lt;/div&gt;
  &lt;div role="tabpanel" class="tab-pane" id="settings"&gt;4&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ul class="nav nav-tabs" role="tablist"&gt;
  &lt;li role="presentation" class="active"&gt;&lt;a href="#home" aria-controls="home" role="tab" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation"&gt;&lt;a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation"&gt;&lt;a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;li role="presentation"&gt;&lt;a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what I essentially want to achieve is that the top nav and bottom nav of the tab systems will automatically update (with the class active) depending on the content selected. Would this be achieved by javascript?</p>