активировать вкладку на основе # хэша в URL - PullRequest
3 голосов
/ 26 июля 2011

Скажите, что у меня был URL, такой как приведенный ниже ... как я могу активировать правильную вкладку?

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>

И МОЙ 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();
});

Ответы [ 2 ]

3 голосов
/ 26 июля 2011
if(location.hash) {
        $('#tabbedContent').each(function(){
            $(this).find("section#" + location.hash.substr(1)).fadeIn();
        });
    } else {
        $('#tabbedContent').each(function(){
            $(this).find(':first-child').fadeIn();
        });
    }
0 голосов
/ 26 июля 2011

Используйте location.hash :)! Возможно, вам придется сначала удалить #.

...