title: Bootstrap load tab from external URL
body: <p>I have looked at various pages on how to load a specific bootstrap tab from an external URL e.g. <a href="http://pagename.html#tab1" rel="nofollow">http://pagename.html#tab1</a> and I have tried to implement, but I just cannot get it to work. Including the base of the code I am using here - the tabs work fine, but I cannot get them to load from an external URL</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;PAGE TITLE&lt;/title&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  &lt;link href="../css/bootstrap.min.css" rel="stylesheet"&gt;
       &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
  &lt;script src="../js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $('#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') ;         
  });
  &lt;/script&gt;     
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;a href="#pane1"&gt;PANE1&lt;/a&gt;
  &lt;div class="tabbable"&gt;
  &lt;ul class="nav nav-tabs"&gt;
  &lt;li class="active"&gt;&lt;a href="#pane1" data-toggle="tab"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#pane2" data-toggle="tab"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#pane3" data-toggle="tab"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#pane4" data-toggle="tab"&gt;Tab 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
  &lt;div id="pane1" class="tab-pane active"&gt;
  &lt;h4&gt;The Markup&lt;/h4&gt;
  &lt;pre&gt;Code here ...&lt;/pre&gt;
  &lt;/div&gt;
  &lt;div id="pane2" class="tab-pane"&gt;
  &lt;h4&gt;Pane 2 Content&lt;/h4&gt;
  &lt;p&gt; and so on ...&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="pane3" class="tab-pane"&gt;
  &lt;h4&gt;Pane 3 Content&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="pane4" class="tab-pane"&gt;
   &lt;h4&gt;Pane 4 Content&lt;/h4&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.tab-content --&gt;
  &lt;/div&gt;&lt;!-- /.tabbable --&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>