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

似乎沒有什么對我有用：

//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 3

根據Matt的回答，這就是我為使我的工作而做的。 我發布了此內容以幫助他人。

<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 4

我喜歡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或其他名稱。

我還沒有弄清楚如何鏈接到嵌套選項卡，例如當一個選項卡包含帶有子選項卡的頁面時。

Answer 5

好吧，您可以將URL設置為http://site.com/index.html?voters ，然后在頁面中檢查window.location.search （搜索是包括問號的部分）。 如果是"?voters"則運行代碼以選擇選項卡。 如果它是"?commenters"則運行代碼以選擇該選項卡。 等等。

Answer 6

您可以通過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的URL，最好不要只使用JS。

Answer 7

我會嘗試修改您的代碼。 這就是我要做的：

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

});

讓我知道它是如何工作的！