基於查詢字符串的活動選項卡

Question

我已經創建了jquery選項卡。

<div id="tabs_container"> 
     <ul id="tabs"> 
      <li class="active"><a href="#tab1">Allgemeines</a></li> 
      <li><a href="#tab2">Kontakt</a></li> 
      <li><a href="#tab3">Musik</a></li> 
      <li><a href="#tab4">Hauptfoto</a></li> 
      <li><a href="#tab5">Einstellungen</a></li> 
     </ul> 
    </div> 
    <div id="tabs_content_container"> 
     <div id="tab1" class="tab_content" style="display: block;"> 
      <?php include('1.php'); ?> 
     </div> 
     <div id="tab2" class="tab_content"> 
      <?php include('2.php'); ?> 
     </div> 
     <div id="tab3" class="tab_content"> 
      <?php include('3.php'); ?> 
     </div> 
     <div id="tab4" class="tab_content"> 
      <?php include('4.php'); ?> 
     </div> 
     <div id="tab5" class="tab_content"> 
      <?php include('5.php'); ?> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
/* <![CDATA[ */ 
$(document).ready(function(){ 
    $("#tabs li").click(function() { 
     // First remove class "active" from currently active tab 
     $("#tabs li").removeClass('active'); 

     // Now add class "active" to the selected/clicked tab 
     $(this).addClass("active"); 

     // Hide all tab content 
     $(".tab_content").hide(); 

     // Here we get the href value of the selected tab 
     var selected_tab = $(this).find("a").attr("href"); 

     // Show the selected tab content 
     $(selected_tab).fadeIn(); 

     // At the end, we add return false so that the click on the link is not executed 
     return false; 
    }); 
}); 
/* ]]> */ 
</script> 

我需要從URL選擇的選項卡，這意味着如果http://example.com/settings.php#tab2

片2一個有源標籤。 ＃tab3然後選項卡3一個活動選項卡。我怎樣才能做到這一點？

Answer 1

window.onhashchange

使用上述本地代碼。它會在網址發生散列變化時觸發

window.onhashchange=function(){ 
if(document.location.hash ==="#tab2"){ 
//write your code here 
} 


} 

希望它能幫上忙。

Answer 2

$(document).ready(function(){ 
    $(".active").removeClass("active"); 
    $(document.location.hash).addClass("active"); 
}); 

Answer 3

http://jsfiddle.net/AavsW/21/

$('#wizard').tabs({ disabled: [1, 2] }); 

試試這個，我希望這本書能解決你的問題