0

ウェブサイトで jquery タブを使用しています。タブはhttp://www.wirenine.com/web-hosting/で確認できます。

URL で #faq のような何らかのアンカーを使用してセカンダリ タブをロードし、ページのロード時にデフォルトでセカンダリ タブをロードできるようにしたいと考えています。これはどのように達成できますか？タブ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

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 に答える
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 に答える