title: Twitter-Bootstrap tabs load container content via AJAX
body: <p>I'm trying to implement this example for Twitter-Bootstrap tabs <a href="http://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/" rel="nofollow">http://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/</a> loading content via AJAX, but I need to load the content from a div container within the same document, rather than loading multiple documents. The code I'm using is as follows:</p>
  
  <p>jQuery</p>
  
  <pre><code>$(function() {
      $("#MainTabs").tab();
      $("#MainTabs").bind("show", function(e) {    
          var contentID  = $(e.target).attr("data-target");
          var contentURL = $(e.target).attr("href");
          if (typeof(contentURL) != 'undefined')
              $(contentID).load(contentURL, function(){ $("#MainTabs").tab(); });
          else
              $(contentID).tab('show');
          });
      $('#MainTabs div[data-target="#tabone"]').tab("show");
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="MainTabs" class="nav nav-tabs"&gt;
      &lt;li&gt;&lt;div data-target="#tabone" data-toggle="tab"&gt;tab One&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div data-target="#tabtwo" data-toggle="tab" href="/test.html"&gt;Tab Two&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div data-target="#tabthree" data-toggle="tab" href="/test2.html"&gt;Tab Three&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane" id="tabone"&gt;Content Tab One&lt;/div&gt;
      &lt;div class="tab-pane" id="tabtwo"&gt;Loading...&lt;/div&gt;
      &lt;div class="tab-pane" id="tabthree"&gt;Loading...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you in advance for any help.</p>