michaelmcgurk michaelmcgurk - 2 months ago 26
CSS Question

Twitter Bootstrap Tabs: Open Specific Tab

I have the following code which works great as tabs - however, I'd like it if I visit

www.mysite.com/#female
that the Female tab becomes active and displays content in the Female tab pane.

How do I achieve this? As you can see, I have made an attempt with my code but this has failed.

Demo: https://jsfiddle.net/2yocpy2k/

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="noindex, nofollow" name="robots">
<meta content="noindex, nofollow" name="googlebot">
<base href="https://fiddle.jshell.net/2yocpy2k/show/light/">
<script src="//code.jquery.com/jquery-compat-git.js" type=
"text/javascript">
</script>
<link href="/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/css/result-light.css" rel="stylesheet" type="text/css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
type="text/javascript">
</script>
<link href=
"//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel=
"stylesheet" type="text/css">
<style type="text/css">
/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
margin: 10px;
}
</style>
<title>Bootstrap 3 Template</title>
<script type='text/javascript'>
//<![CDATA[
$(window).on('load', function() {
/* Latest compiled and minified JavaScript included as External Resource */

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs li h2 a[href="#' + url.split('#')[1] + '"]').tab('show');
}

// Change hash for page-reload
$('.nav-tabs li h2 a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
});//]]>

</script>
</head>
<body>
<div class="container">
<p>Hello</p>
<p>and</p>
<p>Welcome!</p>
<ul class="nav nav-tabs" id="myTab">
<li>
<h2><a data-target="#female" data-toggle="tab">Female</a></h2>
</li>
<li>
<h2><a data-target="#male" data-toggle="tab">Male</a></h2>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="female">
Open Female
</div>
<div class="tab-pane" id="male">
Open Male
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p></p>
</div>
</body>
</html>

Answer

You can create a function that adds the active class when a hash exists on page load. Include it in your top script section like so:

$(function () {
    var hashTab = window.location.hash;
    if (hashTab != '') {
        $('.nav-tabs a[href="' + hashTab + '"]').tab('show');
        $(hashTab).addClass('active');
    }
});