Question

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

例如我有4个菜单是Home |关于|服务|联系在服务页面我有一个标签系统，里面有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>

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

由于

保

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

为：

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

...考虑到你已经拥有了在后来点击事件中描述的相同基本功能，但这取决于你。另外，欢迎你！

Answer 2

在click（）定义之前或之后，添加：

strHash = document.location.hash;

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

Answer 3

（I've made a 'fiddle' on jsFiddle所以你可以测试这个答案。）

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

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

3 个答案: