title: Load tabs remotely using bootstrap 3 with ID
body: <p>Is it possible to load a tab remotely using bootstrap 3? And if so, is it possible to load only a certain part of a website remotely (via ID tag)? If so, how can this be done with bootstrap 3 tabs? I have tried several methods and they simply do NOT work. Thank you!</p>
  
  <p>Here's what I got so far. When I clicked the ajax tab, it just loads on a new page. I want it to load a certain content from that page. Basically, what im trying to do is load contents inside #tabkarma from the remote page, onto the current webpage via tabs. But so far, its not working.</p>
  
  <p>JS</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
  $('[data-toggle="tabajax"]').click(function(e) {
      var $this = $(this),
          loadurl = $this.attr('href'),
          targ = $this.attr('data-target');
  
      $.get(loadurl, function(data) {
          $(targ).html(data);
      });
  
      $this.tab('show');
      return false;
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div role="tabpanel"&gt;
  
    &lt;!-- Nav tabs --&gt;
    &lt;ul class="nav nav-tabs text-center" role="tablist" id="myTabs"&gt;
      &lt;li role="presentation" class="active"&gt;&lt;a href="#about" role="tab" data-toggle="tab"&gt;About Me&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#content" role="tab" data-toggle="tab"&gt;Content&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#activity" role="tab" data-toggle="tab"&gt;Activity&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#followers" role="tab" data-toggle="tab"&gt;Followers&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="/b/reputation.php?uid=4" data-target="#tabkarma" data-toggle="tabajax" id="tabkarma"&gt;Karma&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#achievements" role="tab" data-toggle="tab"&gt;Achievements&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="about"&gt;...&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="content"&gt;...&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="activity"&gt;...&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="followers"&gt;...&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="tabkarma"&gt;Loading&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="achievements"&gt;...&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>