javascript - 如何使用带 anchor 的 URL 加载 jquery Tab

Question

我们在我们的网站上使用 jquery 选项卡，可以在 http://www.wirenine.com/web-hosting/ 看到选项卡

我们希望能够在 URL 中使用某种 anchor (如 #faq)来加载辅助选项卡，以便在页面加载时默认加载辅助选项卡。如何实现？ Tabs JS代码可见

http://cdn.wirenine.com/js/tabs.js

    //<![CDATA[ 
$(window).load(function(){
function displayPage(e) {
    var current = $(this).parent().attr("data-current");
    $("#tabHeader_" + current).removeClass("tabActiveHeader")
    $("#tabpage_" + current).hide();

    var ident = this.id.split("_")[1];
    $(this).addClass("tabActiveHeader");
    $("#tabpage_" + ident).show();
    $(this).parent().attr({ 'data-current': ident })
}
$(function() {
    var container = $("#tabContainer"),
        navitem = container.find((".tabs ul li")).first(),
        ident = navitem[0].id.split("_")[1];
    navitem.addClass("tabActiveHeader").parent().attr({ 'data-current': ident });

    $(".tabpage").filter(function(i) { return i>0; }).hide();
    // OR
    // $(".tabpage:not(:first-child)").hide();

    $(".tabs ul li").on("click", displayPage)
});
});//]]>  

Answer 1

您可以简单地在您的 url GET 参数中插入:

http://www.wirenine.com/web-hosting/?tab=faq

此页面必须是动态的，由 php 或 asp 生成。

示例 PHP:

 <li id="tabHeader_1" <?php if($_GET['tab'] == 'plans') echo 'class="tabActiveHeader"'; ?> ><span>Plans &amp; Features</span></li>
        <li id="tabHeader_2" <?php if($_GET['tab'] == 'compare') echo 'class="tabActiveHeader"'; ?>><span>Compare All Plans</span></li>
        <li id="tabHeader_3" <?php if($_GET['tab'] == 'faq') echo 'class="tabActiveHeader"'; ?>><span>FAQ's</span></li>
        <li id="tabHeader_4" <?php if($_GET['tab'] == 'competition') echo 'class="tabActiveHeader"'; ?>><span>WireNine vs The Competition</span></li>

我想你明白了。