jQuery選項卡：如何創建指向特定選項卡的鏈接？

Question

我使用的標籤簡單jQuery腳本：

的JS：

$(document).ready(function() { 

    $(".tab-content").hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab-content:first").show(); 

    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab-content").hide(); 
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).show(); 
     return false; 
    }); 

}); 

的HTML（爲的index.html）：

<div id="tabs"> 

    <ul class="tabs"> 
     <li><a href="#tabs-voters">Top Voters</a></li> 
     <li><a href="#tabs-commenters">Top Commenters</a></li> 
    </ul> 

    <div id="tabs-voters" class="tab-content"> 

    <p id="h1-01">Tab content</p> 

     <p>Some content</p> 

     </div> 

    <div id="tabs-commenters" class="tab-content"> 

     <h2 id="h-02">Tab content</h2> 

     <p>Some content</p> 

     <h2 id="h-03">Tab content</h2> 

     <p>Some content</p> 

     </div> 

</div> 

我需要做的是什麼創建一個到index.html＃h-02,index.html＃h-03等的工作鏈接，但這些簡單的鏈接不起作用，因爲該選項卡默認爲隱藏。是否有可能修改JS，所以我可以鏈接到打開index.html時隱藏的標籤中的書籤？有人能指引我朝着正確的方向嗎？

非常感謝！ :)

Answer 1

在您的文檔就緒處理程序中，您可以檢查片段的值並使用JavaScript來顯示相應的選項卡。

$(document).ready(function() { 
    ... 

    var tabId = window.location.hash; // will look something like "#h-02" 
    $(tabId).click(); // after you've bound your click listener 
}); 

---

編輯的要求：

$(document).ready(function() { 

    $(".tab-content").hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab-content:first").show(); 

    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab-content").hide(); 
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).show(); 
     return false; 
    }); 

    $(window.location.hash).click(); // super-simple, no? :) 
});​ 

---

編輯2：

如果你希望能夠指定一個標籤內容元素的ID （例如頁面中的h-02喲你鏈接），那麼你必須向後工作以獲得相應標籤的ID來激活它。像這樣：

$(document).ready(function() { 
    var $tabContent = $(".tab-content"), 
     $tabs = $("ul.tabs li"), 
     tabId; 

    $tabContent.hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $tabContent.first().show(); 

    $tabs.click(function() { 
     var $this = $(this); 
     $tabs.removeClass("active"); 
     $this.addClass("active"); 
     $tabContent.hide(); 
     var activeTab = $this.find("a").attr("href"); 
     $(activeTab).show(); 
     return false; 
    }); 

    // Grab the ID of the .tab-content that the hash is referring to 
    tabId = $(window.location.hash).closest('.tab-content').attr('id'); 

    // Find the anchor element to "click", and click it 
    $tabs.find('a[href=#' + tabId + ']').click(); 
});​ 

使用$.closest()意味着散列可以指定.tab-content本身（如tabs-commenters在你的例子）的ID，或它們的孩子。

我做了一些其他的清理建議，以及以上。無需繼續重新選擇這些DOM元素！

Answer 2

那麼，你可以讓你的網址類似http://site.com/index.html?voters，然後在頁面中，你檢查window.location.search（搜索是包括問號的位）。如果是"?voters"，則運行代碼以選擇選項卡。如果它是"?commenters"那麼您運行代碼來選擇該選項卡。等等。

Answer 3

您可以通過GET將參數傳遞給網頁。

即www.yourpage.com?tab=tab1

然後例如（使用PHP）

<?php 
$tab = $_REQUEST['tab']; 
?> 

然後在您的JS代碼，你可以這樣做：

var default_id = <?php echo $tab; ?> 
$("#"+default_id).addClass("active").show(); 

但你應該檢查，以確保default_id是有效的，如果沒有加載工作默認值（像你已經這樣做）

編輯我剛剛注意到這個問題想要使用格式化的網址，例如www.example.com＃h-02，其中您最好堅持只使用JS

Answer 4

我會嘗試修改您的代碼。這是我會怎麼做：你完成

http://jsfiddle.net/RtCnU/8/

這樣，你想要的到底是什麼。

這是我使用的代碼：

<div id="tabs"> 

    <ul class="tabs"> 
     <li><a href="#tabs-voters">Top Voters</a></li> 
     <li><a href="#tabs-commenters">Top Commenters</a></li> 
    </ul> 

    <div id="wrap"> 

    <div id="tabs-voters" class="tab-content"> 

    <p id="h1-01">Tab content</p> 

     <p>Some content</p> 

     </div> 

    <div id="tabs-commenters" class="tab-content"> 

     <h2 id="h-02">Tab cdsfdfontent</h2> 

     <p>Some contesdfdsfsdfant</p> 

     </div> 
</div> 

</div> 

，這是JavaScript：

$(document).ready(function() { 

    $(".tab-content").hide(); 
    $("ul.tabs li a:first").addClass("active").show(); 
    $("#wrap > div").hide().filter(":first").show(); 

    $("ul.tabs li a").click(function() { 
     $("ul.tabs li > a").removeClass("active"); 
     $(this).addClass("active"); 
     $("#wrap > div").hide(); 
     var activeTab = $(this).attr("href"); 
     $(activeTab).show(); 
     return false; 
    }); 

}); 

讓我知道它是如何工作！

Answer 5

似乎沒有爲我工作：

//Default Action 
jQuery(".tab_content").hide(); //Hide all content 
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab 
jQuery(".tab_content:first").show(); //Show first tab content 

//On Click Event 
jQuery("ul.tabs li").click(function() { 
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class 
    jQuery(this).addClass("active"); //Add "active" class to selected tab 
    jQuery(".tab_content").hide(); //Hide all tab content 
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
    jQuery(activeTab).fadeIn(); //Fade in the active content 
    return false; 

}); 

Answer 6

這是我做過什麼讓我的工作的基礎上，馬特的答案。我發佈這個來幫助別人。

<script> 
$(document).ready(function(){ 
    $.tabs('#tabs a'); 
    $('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click'); 
}); 
</script> 

<div id="tabs" class="htabs"> 
    <a tab="#tab_general">General</a> 
    <a tab="#tab_other">Other</a> 
</div> 
<div id="tab_general"> 
    Tab 1 here 
</div> 
<div id="tab_other"> 
    Tab 2 here 
</div> 

Answer 7

我喜歡Dan Powers的回答，我目前使用的是該版本。不過，我起初認爲它沒有工作，所以我做了一個alert(window.location.hash)，發現它包含了#。 Dan的回答是有效的，因爲他在他的標籤ID中使用了#，例如， tab="#tab_general"。所以，請注意這一點。

如果你想讀取沒有＃的散列名，例如tab="tab_general"，替換：

$('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click'); 

與

$('#tabs a[tab=\'' + window.location.hash.substring(1) + '\']').trigger('click'); 

你當然也可以改變tab到id或別的東西。

我還沒有想出如何鏈接到嵌套選項卡，雖然，例如，一個選項卡包含具有子選項卡的頁面。