Bootstrap Tabs & Links Example

Links and the Tab Area

I recently needed to control tab links in Twitter Bootstrap that were outside of the tab element. Here is the trick I used... The trick is to use javascript to do what you want. Using basic JQuery, you can find out which tab should be highlighted by determining which link the user clicked on and then associating it to the proper tab and finally calling Bootstrap's tab.show function . The Javascript code is provided below..

$('#myTab a').click(function (e) {
  e.preventDefault();
  var pattern=/#.+/gi //use regex to get anchor(==selector)
  var contentID = e.target.toString().match(pattern)[0]; //get anchor   
  $('.nav-tabs a[href="'+contentID+'"]').tab('show') ;         
});
					

Links Outside of the Tab Area

the example below shows you how to create external links that can control Twitter Bootstrap's tabs. So, although the links below are not inside the tab element, they will still control the tab elements and switch the tabs.

• External link to contorl Markup Tab
• External link to contorl Twitter Docs Tab
• External link to contorl Tab 3
• External link to contorl Tab 4

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#pane2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#pane3" data-toggle="tab">Tab 3</a></li>
    <li><a href="#pane4" data-toggle="tab">Tab 4</a></li>
  </ul>
  <div class="tab-content">
    <div id="pane1" class="tab-pane active">
      <h4>The Markup</h4>
      <pre>Code here ...</pre>
    </div>
    <div id="pane2" class="tab-pane">
    <h4>Pane 2 Content</h4>
      <p> and so on ...</p>
    </div>
    <div id="pane3" class="tab-pane">
      <h4>Pane 3 Content</h4>
    </div>
    <div id="pane4" class="tab-pane">
      <h4>Pane 4 Content</h4>
    </div>
  </div><!-- /.tab-content -->
</div><!-- /.tabbable -->