如何使用JQuery中的锚标记从其他页面选择特定的选项卡?

I wonder if we can able to select a particular tab in a JQuery tab system from another page..?

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

For example I have a 4 menus that is Home | About | Services | Contact In services page I have a tab system with 5 tabs(Flight, Hotels, International Flight, Rail, Bus) in it, so I'm coming to the point is one who select Bus link from the home page I need to display the Bus tab(default visible one is Flight) in services page.

例如我有一个4菜单,| | |服务接触服务页面中我有一个标签系统5标签(航班、酒店、国际航班、铁路、巴士),所以我来重点是人选择总线链接的主页我需要显示公共汽车服务选项卡(默认可见一个飞行)页面。

I have tried to give the bus link in home page like this.. services.php#tab4 (like anchor tag method)

我试着在主页上给出这个公交车链接。服务。php#tab4(类似锚标记方法)

unfortunately it doesn't work..

不幸的是,它不工作。

Im using the following JQuery for my tab system..

我的标签系统使用以下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;
    });

});

tab links in services pages given in ul li like below

在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>

I hope that someone can answer the above question.

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

Thanks

谢谢

Paul

保罗

3 个解决方案

#1

This should be the complete implementation given your new request:

这应该是您的新请求的完整实现:

$(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;

    });

});

The issue was that you were not considering that if there was a tab specified to go to (the document's hash), you still had that "//When page loads..." area running regardless. You could even shorten the first conditional's contents from:

问题是，您没有考虑如果指定了一个选项卡(文档的散列)，您仍然有“//当页面加载……”区域运行的情况。你甚至可以缩短第一个条件的内容:

    $(".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();

... considering you already have the same basic functionality delineated in the later click event, but that's up to you. Also, you're welcome!

…考虑到在以后的单击事件中已经描述了相同的基本功能，但这取决于您。同时,欢迎你!

#2

Before or after your click() definition, add this:

在单击()定义之前或之后，添加以下内容:

strHash = document.location.hash;

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

#3

(I've made a 'fiddle' on jsFiddle so you can test this answer.)

(我在jsFiddle上做了一个“fiddle”，这样您就可以测试这个答案了。)

You code was almost correct; it seems that a few HTML errors may have been the cause. Assuming our HTML looks like:

你的代码几乎是正确的;似乎是一些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>

... our JavaScript should be:

…我们的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;
    });
});

#1