1

私はいくつかの単純な Jquery タブに JS を使用しています。これは、開発中の Web サイトのメインの垂直ナビゲーション バーとして使用しています。

「タブ 1」(左側) と「タブ 2」(右側) の 2 つのメイン タブがあります。これらの各タブには、Web サイトのさまざまなページにリンクするサブ リンクがあります。

だから私の問題は、「タブ2」からのリンクをクリックするたびに、その新しいページがロードされると、ナビゲーションバーがデフォルトで「タブ1」に戻ることです。

「タブ 2」からクリックしたリンクのロード時にナビゲーション バーがデフォルトでその「タブ 2」になるようにしたいと思います。

私のJSはここにあります：

$(document).ready(function() {

$(".tab-content").hide();                           
$("ul.tabs li:first").addClass("active").show();    
$(".tab-content:first").show();                     
$("ul.tabs li").click(function() {                  
    $("ul.tabs li").removeClass("active");          
    $(this).addClass("active");                     
    $(".tab-content").hide();                       
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn();                          
    return false;
});});

どんな助けでも感謝して受け取ります。

HTMLは次のとおりです。

<!-- START TABS -->

            <div class="tabbz">
                <ul class="tabs">
                    <li><a href="#tab1">サービス内容</a></li>
                    <li class="active"><a href="#tab2">ご利用案内&lt;/a></li>
                </ul>
                <div class="tab-container">
                    <div id="tab1" class="tab-content">
                        <ul>
                            <li>
                            <a href="/a.php">転送サービス&lt;/a>                                
                            <a href="/b.php">お買い物サービス</a>   
                                <ul>
                                    <li><a href="/b1.php">卸売・仕入れサポート</a></li>
                                    <li><a href="/b2.php">国際展示会サポート&lt;/a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div id="tab2" class="tab-content">
                        <ul>
                            <li><a href="/c.php">ご利用ガイド</a>
                                <ul>
                                    <li><a href="/c1.php">個人輸入とは</a></li>
                                    <li><a href="/c2.php">サービスの流れ&lt;/a></li>
                                </ul>
                            </li>
                            <li><a href="/d.php">料金ガイド&lt;/a>
                                <ul>
                                    <li><a href="/d1.php">手数料について&lt;/a></li>
                                    <li><a href="/d2.php">換算レート&lt;/a></li>
                                </ul>
                            </li>                               
                        </ul>
                    </div>
                </div>
            </div>
4

3 に答える 3

1

新しいページの読み込みが発生するため、タブは最初から再初期化されます。選択したタブを何らかの方法でページ間で渡す必要があります-フラグメントまたはパラメーターとしてのURL、またはCookieのいずれかで、値を読み戻して、タブを初期化するときに使用します。

于 2013-03-22T22:50:06.480 に答える
0

この行を変更できます 

$("ul.tabs li:first").addClass("active").show();

に

$("ul.tabs li.active").show();

HTMLでclass="active"をliに追加するだけです

<li class="active">
于 2013-03-23T03:49:44.560 に答える
0

各ページに、そのページを一意に識別する属性または何かを追加できます<body id="contact">。

ボディIDに基づいてアクティブなクラスを追加するようにjsを変更します

  $("ul.tabs li."+$('body').attr('id')).addClass("active").show();
于 2013-03-22T22:53:44.720 に答える