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

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

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

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

我喜欢丹·鲍尔斯的回答，我目前正在使用它的一个版本。不过，一开始我认为它不起作用，所以我发出了 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 或其他东西。

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