URL의 # hash를 기반으로 탭을 활성화하십시오.

Question

아래 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> 

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

Answer 1

사용 location.hash :)! 먼저 #을 제거해야 할 수도 있습니다.

Answer 2

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