开发者

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 &amp; 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜