如何使用JQuery中的锚点选择器从其他页面选择特定的选项卡？

Question

我想知道我们是否可以从另一个页面选择JQuery选项卡系统中的特定选项卡..?

例如，我有4个菜单：主页|关于|服务|联系方式 在服务页面中，我有一个带有5个选项卡（航班、酒店、国际航班、铁路、公共汽车）的选项卡系统。所以我的重点是，当有人从主页选择公交链接时，我需要显示服务页面中的公交选项卡（默认可见的是航班）。

我尝试在主页上提供公交链接，如下所示： services.php#tab4（类似于锚点标签方法）

不幸的是，它不起作用..

我正在使用以下JQuery进行选项卡系统。

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

在服务页面中，以以下形式给出的ul li中的选项卡链接：

<ul class="tabs">
        <li><a href="#tab1">Flight</li>
        <li><a href="#tab2">Hotels</a></li>
        <li><a href="#tab3">International Flight</a></li>
        <li><a href="#tab4">Rail</a></li>
        <li><a href="#tab5">Bus</a></li>
</ul>

希望有人能回答上面的问题。

谢谢。

保罗

- Akhil Paul

Answer 1

基于你的新需求，这应该是完整的实现：

$(document).ready(function() {

    var strHash = document.location.hash;

    if (strHash == "") {

        // Go to the first tab as long as there's no other tab specified on which
        // to start.

        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

    } else
        $("a[href='" + strHash + "']").parent().click();

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;

    });

});

问题在于你没有考虑到如果指定了要跳转的标签（文档的哈希值），你仍然会运行那个“//当页面加载时…”区域。你甚至可以缩短第一个条件语句的内容，如下所示：

    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

to:

    $("ul.tabs li:first").click();

考虑到您已经在后面的点击事件中有了相同的基本功能，但这取决于您。另外，不用谢！

- Gabriel Ryan Nahmias

---

Gabriel，太棒了！我想我可以以某种方式设置其他事情，非常感谢你的帮助。 - Akhil Paul

你是什么意思？还有什么其他事情吗？再次感谢，随时欢迎！ - Gabriel Ryan Nahmias

Answer 2

在你的 click() 定义之前或之后，添加以下代码：

strHash = document.location.hash;

if (strHash != "")
    $("a[href='"+strHash+"']").parent().click();

- Gabriel Ryan Nahmias

---

谢谢Gabriel的快速回复，很抱歉我没有理解你之前给出的代码，请问你能否更具体地说明如何实现呢？ - Akhil Paul

我建议你将这段代码添加到$(document).ready( ... )区域中。试一试，然后告诉我。有这个页面的URL会更有帮助。 - Gabriel Ryan Nahmias

Gabriel，我可以问你一件事吗？现在它运行良好，我从其他页面点击四个链接，它直接跳转到服务页面，但默认的第一个选项卡会短暂显示，然后加载所点击的选项卡。我们能否在不显示服务页面的默认选项卡的情况下直接跳转（显示）到所点击的选项卡？ - Akhil Paul

Answer 3

（{{link1:我在jsFiddle上创建了一个“fiddle”，你可以测试这个答案。）

你的代码几乎是正确的；看起来一些HTML错误可能是原因。假设我们的HTML看起来像：

<ul id="tabs">
        <li><a href="#tab1">Flight</a></li>
        <li><a href="#tab2">Hotels</a></li>
        <li><a href="#tab3">International Flight</a></li>
        <li><a href="#tab4">Rail</a></li>
        <li><a href="#tab5">Bus</a></li>
</ul>
<div id="tab1" class="tab_content">1</div>
<div id="tab2" class="tab_content">2</div>
<div id="tab3" class="tab_content">3</div>
<div id="tab4" class="tab_content">4</div>
<div id="tab5" class="tab_content">5</div>

...我们的JavaScript应该是：

$(document).ready(function() {
    //When page loads, hide all content 
    $(".tab_content").hide();
    $(".tab_content:first").show(); //Show first tab content
    $("#tabs li:first").addClass("active").show(); //Activate first tab
    //On Click Event
    $("#tabs a").click(function() {

        //Remove any "active" class
        $("#tabs .active").removeClass("active");

        //Add "active" class to selected tab
        $(this).parent().addClass("active");

        // Hide all tab content
        $(".tab_content").hide();

        //Find the href attribute value to identify the active tab + content
        var a = $(this).attr("href");

        //Fade in the active ID content
        $(a).fadeIn();

        return false;
    });
});

- Lachlan McDonald

---

谢谢你详细的回答，但这不是我想要的。尽管我的选项卡系统运行正常，但我想在服务页面上从另一个页面（比如主页）显示特定的选项卡，当有人点击时。 - Akhil Paul