activate tab based on the # hash in the url
Say i had a URL such as the one below...how can i activate the correct tab?
http://domain.com/safety.php#tabOne
Heres my HTML:
<div id="tabsWrapper">
<div class="tabMenu">
<ul class="tabset">
<li><a class="tab active" href="#tabOne">Safety First</a></li>
<li><a class="tab" href="#tabTwo">BS8848 & LoTC</a></li>
开发者_如何学JAVA <li><a class="tab" href="#tabThree">Know Before You Go</a></li>
</ul>
</div>
<div id="tabbedContent">
<section class="contentTab" id="tabOne" style="display: block;">Content here</section>
<section class="contentTab" id="tabTwo">
<h3 style=""></h3>
</section>
<section class="contentTab" id="tabThree">
<h3 style=""></h3>
</section>
</div>
<div class="clear"></div>
</div>
AND MY JQUERY:
$('.tabset>li>a').click(function(){
var $tab;
$(this).closest('.tabset').find('>li>a.active').removeClass('active');
$(this).addClass('active');
$tab = $($(this).attr('href'));
$tab.siblings().hide();
$tab.find('>div').show();
$tab.fadeIn();
return false;
});
$('#tabbedContent').each(function(){
$(this).find(':first-child').fadeIn();
});
if(location.hash) {
$('#tabbedContent').each(function(){
$(this).find("section#" + location.hash.substr(1)).fadeIn();
});
} else {
$('#tabbedContent').each(function(){
$(this).find(':first-child').fadeIn();
});
}
Use location.hash
:)! You may need to strip the #
of it first.
精彩评论