2011-07-26 16 views
3

以下のようなURLがありました...正しいタブを有効にするにはどうすればよいですか?URLの#ハッシュに基づいてタブを有効にしてください

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

HERESに私の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(); 
}); 

答えて

0

使用location.hash :)!最初に#を取り除く必要があるかもしれません。

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