jQuery 选项卡：如何创建指向特定选项卡的链接？答案

【问题标题】：jQuery tabs: how to create a link to a specific tab?jQuery 选项卡：如何创建指向特定选项卡的链接？
【发布时间】：2010-08-30 14:01:50
【问题描述】：

我正在为标签使用一个简单的 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 时隐藏的选项卡中的书签？有人能指出我正确的方向吗？

非常感谢！ :)

【问题讨论】：

标签： javascript jquery tabs

【解决方案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 本身的ID（例如您的示例中的tabs-commenters）或其子项。

我在上面也提出了一些其他的清理建议。无需不断重新选择那些 DOM 元素！

【讨论】：

谢谢！我想这听起来正是我正在寻找的。不幸的是，我更像是一个设计师/HTML+CSS 唯一的人，所以我不知道如何在现实生活中实现这一点。非常感谢您或有人可以更详细地解释这一点（或帮助最终脚本）。
@klavina - 发布的~2行代码应该是你所需要的！实际上，您只需将以下代码行添加到文档就绪处理程序的末尾即可逃脱：$(window.location.hash).click(); - 无论如何，我会将您的代码复制粘贴到我的答案中以提供完整的代码 sn-p。
嗯，但它不起作用；例如：projects.klavina.com/tabs/tabs.html#h-02 应该链接到第二个选项卡（热门评论者）文本链接到这里，但它只是打开默认选项卡（热门投票者）。我做错了什么？
@klavina - 问题是 ID 为 h-02 的元素必须是 $("ul.tabs li") 中 li 之一的子元素 - 现在正在修改。
@MattBall 我收到 JavaScript 错误“$tabs 不是函数”。当我单击指向 #tabs-voters 之类的选项卡的链接时，页面不会更改，但如果我在浏览器中点击重新加载，则会转到该选项卡。我的代码就像“编辑 2”

【解决方案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;

});

【讨论】：

【解决方案3】：

好吧，您可以使您的 URL 类似于 http://site.com/index.html?voters，然后在页面中检查 window.location.search（搜索是包含问号的位）。如果是"?voters"，那么您运行代码来选择选项卡。如果是"?commenters"，那么您运行代码来选择该选项卡。等等。

【讨论】：

注意：您也可以将其设为index.html#voters 并检查window.location.hash 以获得"#voters"。这完全取决于您是否希望浏览器将其视为“单独的页面”......如果是，请使用?。如果不是，请使用#。

【解决方案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;
    });

});

告诉我结果如何！

【讨论】：

谢谢，但它似乎不起作用.. 我需要开始工作的链接是projects.klavina.com/tabs/tabs2.html#h-02 - 应该链接到第二个选项卡（热门评论者）文本链接到这里，但它只是打开默认选项卡（Top Voters）+ 并且还丢失了选项卡链接的“活动”类..

【解决方案5】：

您可以通过 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

【讨论】：

【解决方案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>

【讨论】：

【解决方案7】：

我喜欢 Dan Powers 的回答，我目前正在使用它的一个版本。但是，起初我确实认为它不起作用，所以我做了一个alert(window.location.hash)，发现它包括#。丹的回答是有效的，因为他确实在他的标签 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 或其他内容。

我还没有弄清楚如何链接到嵌套选项卡，例如，当一个标签包含一个带有子标签的页面。

【讨论】：