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

使用 $.closest() 表示哈希可以指定.tab-content 本身(例如您的示例中的 tabs-commenters )或其子项的 ID.

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屋！