如何根據鏈接URL激活我的jquery tabber

我對jquery很新，我決定構建一個jquery tabber。到目前爲止這麼好，但我有一個小問題！我不知道如何激活基於URL的標記。例如，當鏈接是www.myweb.com#tab2時，第二個tabber變爲激活狀態。我的jquery如下。現在我知道jquery有它自己的tabber腳本，但我不想使用它。所以，別人幫我完成這個請如何根據鏈接URL激活我的jquery tabber

的Javascript

$(document).ready(function() { 

    var hash = location.hash; 
    var link1 = ("ul#tabs li a[href='" + hash + "']") 
    var link2 = ("ul.tabs li a[href='" + hash + "']") 
    var link3 = ("ul#tabs li[href='" + hash + "']") 

    $(".tab_content").hide(); //Hide all content 
    if ((link3.length)(link2.length)(link1.length)) 

      { //check if such link exists 
         $(link3, link2, link1).parent().addClass("active"); //Activate tab 
         $(hash).show(); 
    } 

    else { 
     $("ul.tabs li a:first, ul#tabs li:first, ul#tabs li a:first").addClass('active'); 
     $(".tab_content:first").show() 

     // On Click Event 
     $("ul.tabs li").click(function() { 
      $("ul.tabs li").removeClass("active"); //Remove any "active" class 
      $(this).addClass("active"); //Add "active" class to selected tab 
      $(".tab_content").hide(); //Hide all tab content 

      var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
      $(activeTab).fadeIn(); //Fade in the active ID content 
      return false; 
     }); 

});

HTML

<ul class="tabs"> 
    <li><a href="#tab1">Design Team</a></li> 
    <li><a href="#tab2">Publications</a></li> 
    <li><a href="#tab3">Awards &amp; Recognitions</a></li> 
    <li><a href="#tab4">Our Mission</a></li> 
    <li class="last-item"><a href="#tab1">Company Profile</a></li> 
</ul>

這是我走了多遠。由於我有3個選擇器的jquery代碼是奇怪的不工作我怎麼做到這一點，所以標籤是基於URL激活？謝謝

來源

2013-03-29 Joe Paul

看看JQueryUI，他們有這樣的預構建組件。具體做法是：http://jqueryui.com/tabs/

編輯：

或者是他們爲什麼要建立自己的具體原因是什麼？

來源

2013-03-29 14:42:52 NeilA

是的，我已經在我的所有網頁中使用過它，我不想再做整個編輯 –

可以使用以下設定的所選選項卡：

$(document).ready(function() { 

    $('#tabs').tabs(); // make jquery tabs 

    $("#tabs").tabs("select", window.location.hash); 
});

第二參數的函數$.tabs接受任一索引或一個選擇器。

來源

2013-03-29 15:11:57 Amitd

如何根據鏈接URL激活我的jquery tabber

回答

相關問題