Twitter Bootstrap Tabs: Open Specific Tab
Question
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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p></p>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2016-10-06 16:48:14
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');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Twitter Bootstrap Tabs: Go to Specific Tab with Hyperlink
Twitter bootstrap go to specific tab for nested tabs
Twitter Bootstrap 5 Tabs: Go to Specific Tab on Page Reload or Hyperlink
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
Twitter Bootstrap: Getting the index of an open tab
How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
jquery tabs to open the tab with a specific class
Twitter Bootstrap Modal w/tabs default to first tab
Twitter Bootstrap - Dynamically Add/Remove Tabs and Tab Content
Bootsrap Twitter tabs - go a specific tab when the page reloads
Related Tags