根据网址中的#哈希值激活标签 [英] activate tab based on the # hash in the url

问题描述

说我有一个URL，例如下面的URL ...如何激活正确的标签?

Say i had a URL such as the one below...how can i activate the correct tab?

http://domain.com/safety.php#tabOne

这里是我的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>
                  <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>

我的询问:

$('.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();
        });
    }

这篇关于根据网址中的#哈希值激活标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！