如何直接链接到特定的 JavaScript 选项卡？答案

【问题标题】：How can I link directly to a specific JavaScript tab?如何直接链接到特定的 JavaScript 选项卡？
【发布时间】：2012-05-07 10:40:59
【问题描述】：

我的网站有一个标签式界面，在所有页面中都一致使用。我可以链接到基本页面（第一个选项卡），但不知道如何链接到特定选项卡。

这是我的 JavaScript：

$(document).ready(function() {
  $(".tabs a").click(function() {
    var $this = $(this);
    $(".panel").hide();
    $(".tabs a.active").removeClass("active");
    $this.addClass("active").blur();
    var panel = $this.attr("href");
    $(panel).fadeIn(250);
    return false;
  });
$(".tabs li:first-of-type a").click();
});

我的每个页面都是这样设置的：

<div id="aboutContainer">
    <ul class="tabs">
        <li><a href="#panel1">About Us</a></li>
        <li><a href="#panel2">Contact Us</a></li>
        <li><a href="#panel3">Mailing List</a></li>
        <li><a href="#panel4">Terms</a></li>
        <li><a href="#panel5">Privacy Policy</a></li>
        <li><a href="#panel6">Help</a></li>
    </ul>
        <div class="panelContainer">
            <div class="panel" id="panel1">
                <?php include('includes/aboutme.php'); ?>
            </div>

            <div class="panel" id="panel2">
                <?php include('includes/contact.php'); ?>
            </div>

            <div class="panel" id="panel3">
                <?php include('includes/mailinglist.php'); ?>
            </div>

            <div class="panel" id="panel4">
                <?php include('includes/terms.php'); ?>             
            </div>

            <div class="panel" id="panel5">
                <?php include('includes/privacypolicy.php'); ?>
            </div>

            <div class="panel" id="panel6">
                <?php include('includes/cheekyreference.php'); ?>
            </div>
        </div>
</div>

任何指针将不胜感激。我对 JavaScript 还很陌生，无法在网上找到答案。

澄清一点：

如果我在 about.php 页面上，选项卡式界面可以工作。但我试图创建的链接类型如下：如果我在另一个页面上，我想链接到关于页面上的特定选项卡。我有一个导航页脚，我希望能够单击“邮件列表”或“联系人”等超链接，并显示正确的页面和正确的选项卡。

【问题讨论】：

你正试图淡入一个字符串 - 这是行不通的。
你能详细说明你想做什么你想链接什么
你在使用 jQuery UI 吗？
如果我在 about.php 页面上，选项卡式界面可以工作。但我试图创建的链接类型如下：如果我在另一个页面上，我想链接到关于页面上的特定选项卡。我有一个导航页脚，我希望能够单击“邮件列表”或“联系人”并显示正确的页面以及正确的选项卡。我希望澄清。
不，我没有使用 jQuery UI。

标签： javascript html css

【解决方案1】：

例如，如果您想专门单击“条款”选项卡，您可以：

$(".tabs a[href='#panel14']").click();

【讨论】：

【解决方案2】：

$('a[href="#panel1"]').click(function() {
        //insert action here;
});

【讨论】：

您也应该尝试解释您的答案，即使您认为这是不言自明的——其他人可能不会。只是做了一些stackoverflow.com/review，没有修改。

【解决方案3】：

也许这是矫枉过正，但您应该能够通过客户端站点路由来做到这一点。

您首先需要设置根据地址栏中的 url 激活的“路由”，然后您可以使用以下格式的链接链接到 tab1 on about 并在激活的路由中激活相应的选项卡（触发该选项卡上的点击事件）。

这是一个提供 JavaScript 路由的 jQuery 插件的链接

http://jsrouter.codeplex.com/

当然还有其他路由解决方案，这里有一个关于该主题的stackoverflow帖子的链接 javascript clientside routing/pathing library

【讨论】：

【解决方案4】：

实现这一点的技术是使用 url 的哈希部分。例如：

about.php#panel1

或者，类似的，用 hashbang：

about.php#!panel1

（如果您关心 SEO，则 hashbang 是更好的选择。）

然后您需要在页面中包含一个脚本，该脚本将检测 url 的哈希部分，并相应地激活选项卡。

抱歉，我一直这样做，但没有可用的公开示例。有帖子我会更新的。

在 jQuery 中它看起来像这样：

$(".tabs a[href="+window.location.hash+"]").click();

注意：您也可以使用查询字符串，但如果您已经在页面上，哈希将阻止页面刷新。

【讨论】：