1

I have looked at various pages on how to load a specific bootstrap tab from an external URL e.g. http://pagename.html#tab1 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

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>PAGE TITLE</title>
<meta name="description" content="">
<meta name="author" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<script>
$('#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') ;         
});
</script>     
</head>
<body>
<div class="container">
<a href="#pane1">PANE1</a>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li>
<li><a href="#pane2" data-toggle="tab">Tab 2</a></li>
<li><a href="#pane3" data-toggle="tab">Tab 3</a></li>
<li><a href="#pane4" data-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content">
<div id="pane1" class="tab-pane active">
<h4>The Markup</h4>
<pre>Code here ...</pre>
</div>
<div id="pane2" class="tab-pane">
<h4>Pane 2 Content</h4>
<p> and so on ...</p>
</div>
<div id="pane3" class="tab-pane">
<h4>Pane 3 Content</h4>
</div>
<div id="pane4" class="tab-pane">
 <h4>Pane 4 Content</h4>
</div>
</div><!-- /.tab-content -->
</div><!-- /.tabbable -->
</div>
</body>
</html>
James La Mode Outre
  • 53
  • 1
  • 6
  • possible duplicate of [How to use ajax loading with bootstrap-tabs.js?](http://stackoverflow.com/questions/8456974/how-to-use-ajax-loading-with-bootstrap-tabs-js) – Matt S Aug 15 '14 at 19:50
  • @MattS I think that link refers to loading content dynamically into a tab?, whereas my content is static, all I want to do is load a specific tab via external URL, like having an html anchor to go to a specific part of the page. It's similar to: http://stackoverflow.com/questions/19814481/linking-to-a-bootstrap-tab-from-outside-how-to-set-the-tab-to-active, except I just can't make any of the code I've found work, so I thought someone could look at the code and hopefully tell me where I'd gone wrong :) – James La Mode Outre Aug 15 '14 at 21:07
  • Loading from an "external" URL is done with AJAX, regardless of how the HTML is generated. – Matt S Aug 15 '14 at 21:19

1 Answers1

3

Just found the answer - it's really easy and it works! Just use this script inside the head:

$(function () {
var activeTab = $('[href=' + location.hash + ']');
activeTab && activeTab.tab('show');
});

Apparently it just checks for the hash in the URL and sets it to the active tab. Tested and it works!

James La Mode Outre
  • 53
  • 1
  • 6