jQuery选项卡：如何创建指向特定选项卡的链接？ [英] jQuery tabs: how to create a link to a specific tab?

问题描述

我正在使用一个简单的jQuery脚本作为标签：

I'm using a simple jQuery script for tabs:

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）：

The HTML (for the 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时隐藏的选项卡中的书签？有人能指出我正确的方向吗？

What I need to do is to create a working link to index.html#h-02, index.html#h-03 etc., but these simple links don't work because the tab is hidden by default. Is it possible to modify the JS, so I can link to a bookmark in tabs that are hidden when opening index.html? Can someone point me in the right direction?

非常感谢！ ：）

推荐答案

在文档就绪处理程序中，您可以检查片段的值并使用JavaScript显示相应的选项卡。

In your document ready handler, you can examine the value of the fragment and use JavaScript to show the corresponding tab.

$(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以激活它。像这样：

If you want to be able to specify an ID of a tab content element (like h-02 in the page you linked) then you have to work backwards to get the ID of the corresponding tab to activate it. Like this:

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

使用 $ .extarest（） 表示哈希可以指定的I​​D .tab -content 本身（例如示例中的 tabs-commenters ）或其子代。

Using $.closest() means that the hash can specify the ID of the .tab-content itself (such as tabs-commenters in your example), or a child thereof.

我上面也做了一些其他的清理建议。无需继续重新选择那些DOM元素！

I've made some other cleanup suggestions as well above. No need to keep re-selecting those DOM elements!

这篇关于jQuery选项卡：如何创建指向特定选项卡的链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！