1

私は何時間もこれの解決策を見つけるのに苦労していますが、何をしてもうまくいかないようです（javascript/jqueryの知識が許す限り）。したがって、検索フォームでタブを切り替えるこのjqueryスクリプトがあり、コードは次のとおりです。

<ul id="tabs">
    <li><a href="#" name="tab1">T1/a></li>
    <li><a href="#" name="tab2">T2</a></li>
</ul>

<div id="content"> 
    <div id="tab1">
    TAB 1 CONTENT
    </div>

    <div id="tab2">
    TAB 2 CONTENT
    </div>
</div>

そしてJQUERYコード：

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});

タブの div 名とは別に class="current" を追加しようとしましたが、何も機能しません。クリック時にのみ現在のタブの変更を受け入れるこのクリック機能があるのではないかと考えていますが、これを自動にしたいので、2番目のタブがアクティブなときに、指定した「現在の」クラスに基づいてアクティブのままになります。私の状況は次のようなものです: 最初のタブは英語からイタリア語へ検索し、2 番目のタブはイタリア語から英語へ検索しますが、2 番目のオプション (It to En) を選択し、ページを更新して結果を表示すると、最初のタブが選択されています。そのため、ユーザーが (イタリア語から英語まで) 2 回以上検索したい場合は、2 番目のタブを何度も選択する必要があります。

jquery が「現在の」クラスを検出できるようにすることができれば、いくつかの php を追加して URL パラメータをチェックし、適切なタブを適切にアクティブ化できます。例: search.php?lang=it_to_engの場合、'current'class を 2 番目のタブに追加し、その逆も同様です。

前もって感謝します。

4

2 に答える 2

0

これを行うにはjquery.cookieを使用する必要があるようです。コードを次のように変更しました。

$(document).ready(function() {

    var cookieName = 'tab_of';
    var cookieTab = 'tab';
    var cookieOptions = {expires: 7, path: '/'};

    $("#content div").hide(); //Hide all content        
    $("#" + $.cookie(cookieName)).addClass("current");
    $("#" + $.cookie(cookieTab)).fadeIn();
    if($.cookie(cookieName) == null){
        //alert($.cookie(cookieName));
        $("#tabs li:first a").attr("class","current"); // Activate first tab
        $("#content div:first").fadeIn(); // Show first tab content
    }

    $("#tabs a").click(function(e){
        e.preventDefault();
        $("#content div").hide(); //Hide all content
        $("#tabs li a").removeClass("current");
        $("#" + $.cookie(cookieName)).removeClass("current");
        $.cookie(cookieName, $(this).attr("id"), cookieOptions);
        $("#" + $.cookie(cookieName)).addClass("current");
        $.cookie(cookieTab, $(this).attr('name'), cookieOptions);
        $('#' + $.cookie(cookieTab)).fadeIn();
    });
});

ページをリロードするたびに、タブの位置は最後に選択した位置に基づきます。ここでデモをチェックしてください: http://jsfiddle.net/ongisnade/597HR/

新しいアップデート：

必要に応じて、ユーザーがブラウザを終了するとセッション Cookie が破棄されます。この行を変更します。

var cookieOptions = {expires: 7, path: '/'};

に

var cookieOptions = {path: '/'};

新しい修正アップデート:

このコードを$("#tabs li a").removeClass("current");上に追加します$("#" + $.cookie(cookieName)).removeClass("current");

ブラウザのキャッシュをクリアして、ページをリロードしてください。ここをクリックしてデモを表示: http://jsfiddle.net/ongisnade/597HR/1/

于 2012-10-01T02:49:55.690 に答える
0

http://jsbin.com/ebomej/1/edit

$(document).ready(function() {
    $("#content div").hide().eq(0).show(); // show first one
    $("#tabs li").eq(0).addClass('current'); // set active one


    $('#tabs a').click(function(e) {
        e.preventDefault();
        if( $(this).closest("li").hasClass('current') ){ //detection for current tab
         return;      
        }else{             
            $("#content div").hide(); //Hide all content
            $("#tabs li").removeClass('current');
            $(this).parent().addClass('current'); // Activate this
            $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});
于 2012-09-30T23:14:09.797 に答える