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

Question

我的网站有一个选项卡界面，所有页面都一致使用。我可以链接到基本页面（第一个选项卡），但无法找出如何链接到特定选项卡。

这是我的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页面上，选项卡界面可以正常工作。但是我正在尝试创建的链接类型如下：如果我在另一页上，我想链接到about页面中的特定选项卡。我有一个导航页脚，我希望能够单击超链接，例如“邮件列表”或“联系人”，并显示正确的页面以及正确的选项卡。

- Dominic

---

你正在尝试淡入一个字符串 - 这将无法实现。 - ThiefMaster

你能详细说明一下你想要做什么吗？你试图链接什么？ - EnigmaMaster

你正在使用jQuery UI吗？ - Jack

如果我在about.php页面上，选项卡界面可以正常工作。但是我想要创建的链接类型如下：如果我在另一个页面上，我想要链接到关于页面上的特定选项卡。我有一个导航页脚，我希望能够点击“邮件列表”或“联系方式”，并且正确的页面以及正确的选项卡显示出来。我希望这样能够澄清问题。 - Dominic

不，我没有使用jQuery UI。 - Dominic

Answer 1

实现此技术的方法是使用URL的哈希部分。例如：

about.php#panel1

或者，类似地，使用哈希符号：

about.php#!panel1

如果您关心SEO，哈希Bang是更好的选择。

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

抱歉，我经常这样做，但没有可用的公共示例。 我会在有示例时更新帖子。

在jQuery中，它看起来像这样：

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

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

- Christophe

Answer 2

如果你想要特别点击“条款”选项卡，例如，你可以这样做： $(".tabs a[href='#panel14']").click();

- Nadh

Answer 3

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

- EnigmaMaster

---

即使您认为答案很明显，也应尽量解释清楚。其他人可能不清楚。我只是在做一些stackoverflow.com/review，没有进行修改。 - lsl

Answer 4

也许这有些过度了，但你应该能够通过客户端路由实现它。

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

这里有一个链接到提供JavaScript路由的jQuery插件。

http://jsrouter.codeplex.com/

当然还有其他的路由解决方案，这里是一个关于该主题的stackoverflow帖子链接javascript客户端路由/路径库

- Jack