title: loading new page in tabs using twitter bootstrap
body: <p>Hi I am using the following code to create tabbed layout using twitter bootstrap</p>
  
  <pre><code>&lt;ul class="nav nav-tabs" &gt;
     &lt;li class="active"&gt;&lt;a href="#"  data-toggle="tab"&gt;Request Audit&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#" data-toggle="tab"&gt;status&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#" data-toggle="tab"&gt;Help&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>now in all tabs i need different page to load.So i want to do this :</p>
  
  <pre><code>&lt;ul class="nav nav-tabs" &gt;
         &lt;li class="active"&gt;&lt;a href="#"  data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="status.html" data-toggle="tab"&gt;status&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="settings.html" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="help.html" data-toggle="tab"&gt;Help&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..</p>
  
  <p>update :</p>
  
  <pre><code>&lt;ul class="nav nav-tabs" id="myTab"&gt;
    &lt;li class="active"&gt;&lt;a href="#audit"&gt;Request Audit&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#status"&gt;status&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#help"&gt;Help&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="audit"&gt;
      &lt;p&gt;audit&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane" id="status"&gt;
       &lt;p&gt;status&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane" id="settings"&gt;
        &lt;p&gt;settings&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane" id="help"&gt;
        &lt;p&gt;help&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have added this script</p>
  
  <pre><code>&lt;script&gt;  
  
     $('#myTab a[href="#status"]').click(function (e) {
           e.preventDefault();
           $(this).tab('show');
           $('#status').load('status.html');
     });
  &lt;/script&gt;
  </code></pre>