0

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

我们希望能够在 URL 中使用某种锚点（如 #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)
});
});//]]>
4

3 回答 3

0 
$(function(){
    var targetTab = location.hash.replace(/#/, '');
    $("li[id$='" + targetTab + "']").click();
});

您可以将tabHeaderlistItems 上 ID 的数字部分替换为类似的名称tabHeader_faqs，tabHeader_plans它应该可以工作。

于 2012-10-19T08:20:25.907 回答
0

checkTab 函数检查添加的值是否在 url 中。如果是，选项卡 5 将显示为 display: block; 在 CSS 中。所以标签总是在你的页面上，但只会显示你添加的值（checkTab（value））是否在url中。

HTML

<li id="tabHeader_5">
    <span>faq</span>
</li>

<div class="tabpage" id="tabpage_5">
    Faq
</div>

CSS

#tabHeader_5{
    display: none;
}

jQuery

$(window).load(function(){
function displayPage(e) {

 checkTab('#faq');
 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)
});
});

function checkTab(value)
{

    var tabUrl = href.toString().toLowerCase();

    if (tabUrl.indexOf(value) >= 0) {
        $('#tabHeader_5').show();
    }



}

//]]>
于 2012-10-19T08:21:30.397 回答
0

您可以简单地将您的 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>

我想你明白了。

于 2012-10-19T08:23:25.433 回答