Nav - Bootstrap - Custom Content for Web Pages (Manual JS Method of Activating Tabs)

by bizamajig

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
   
    <div class="span7 alert alert-error">
        <h3>Try clicking the the link within TAB 3, it will switch to TAB 1's Content</h3>
    </div>
      
     <div class="span8">
        <ul class="nav nav-pills">
          <li id="test1button"><a href="#test1" data-toggle="tab">Tab 1</a></li>
          <li id="test2button"><a href="#test2" data-toggle="tab">Tab 2</a></li>
          <li id="test3button" class="active"><a href="#test3" data-toggle="tab">Tab 3</a></li>
        </ul>
      </div>
    
    <div class="span11">
        <hr>
      <div class="tab-content"> 
          <div class="tab-pane" id="test1"><h1>THIS IS TAB 1 DATA, <br> Tab 3 is still active. :(</h1>
        </div>
        <div class="tab-pane" id="test2">
        </div>
        <div class="tab-pane active" id="test3">
            <h2>Click the link below to show content from Tab 1</h2><h4><span class="label label-important">HEADS UP!</span>Notice that once the data is displayed from TAB 1, TAB 3 is still active</h4><br>
            
            <a href="#test1" data-toggle="tab" id="showtab1" class="btn btn-danger btn-large">See the content in TAB 1</a>
         
        </div>
        </div>
    </div>
</div>

JavaScript

$("#showtab1").click(function() {
    if ($('#test3button').hasClass('active'))
            $('#test3button').removeClass('active');
        $('#test1').addClass('active');
        $('#test1button').addClass('active');            
    return false;
});