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

问题描述：

我想知道我们能否从另一个页面选择一个特定的选项卡在JQuery选项卡系统？

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

例如，我有4个菜单，即Home |关于|服务|联系
在服务页面我有一个标签系统，其中有5个标签（航班，酒店，国际航班，铁路，巴士），所以我来到的一点是从主页选择总线链接需要在服务页面中显示总线选项卡（默认可见一个是Flight）。

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.

我试图在主页中提供总线链接，如下所示：
services.php＃tab4（像锚标签方法）

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

不幸的是它不工作。

我使用下面的JQuery为我的标签系统..

Im using the following JQuery for my tab system..

$(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中提供的服务页面

tab links in services pages given in ul li like below

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

感谢

保罗

答

根据您的新请求完成实现：

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

到：

    $("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!

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

相关推荐