根据 url 中的 # 哈希激活选项卡答案

【问题标题】：activate tab based on the # hash in the url根据 url 中的 # 哈希激活选项卡
【发布时间】：2011-07-26 10:03:29
【问题描述】：

假设我有一个如下所示的 URL...我怎样才能激活正确的选项卡？

这是我的 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();
});

【问题讨论】：

标签： jquery location

【解决方案1】：

if(location.hash) {
        $('#tabbedContent').each(function(){
            $(this).find("section#" + location.hash.substr(1)).fadeIn();
        });
    } else {
        $('#tabbedContent').each(function(){
            $(this).find(':first-child').fadeIn();
        });
    }

【讨论】：

【解决方案2】：

使用location.hash :)！你可能需要先去掉它的#。

【讨论】：