1

問題：

2 つのタブで構成されるリストがあります。フォームを送信してページがリロードされたときに、ユーザーが最後に使用していたタブを追跡して、再度有効にしたいと考えています。

HTML コード:

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#participants" data-toggle="tab">Participants</a>
    </li>
    <li>
        <a href="#gradevalues" data-toggle="tab">Criteria</a>
    </li>
</ul>

PHP コード:

PHP は、"participants" または "gradevalues" を含む変数 $subtabname を生成します。

シナリオ：

#gradevalues を使用してフォームを送信すると、変数 $subtabname に「gradevalues」が含まれます。jQuery で #participants から「アクティブ」クラスを削除し、代わりに #gradevalues の li に追加したいと思います。

質問：

このPHP変数を使用して要素を見つけ、その親liに移動して「アクティブな」クラスを削除/追加するには、jQueryでどのようにしますか?

[更新]: 最適ではない作業用 jQuery コード

$( "#myTab li.active" ).removeClass("active");
$( "#myTab a[href=#'.$subtabname.']" ).parent("li").addClass("active");
4

3 に答える 3

1

PHP ファイル内:

<body data-activetab="<?php echo $subtabname ?>">

jQuery ファイル内:

(function () {
    var subtabname = $( 'body' ).data( 'activetab' );
    var $activeTab = $( 'a[href="#' + subtabname '"]', 'myTab' ).parent();
    $activeTab.addClass( 'active' ).siblings().addClass( 'active' );
}());

コードを少し最適化しました。

(function ( $ul, active ) {
    $ul.children().removeClass( active );
    $ul.find( 'a[href="#.$subtabname."]' ).parent().removeClass( active );
}( $( '#myTab' ), 'active' ));

コードの繰り返しを避けるために、クラス名を文字列として渡します (コードでは、クラス名の文字列が 3 回繰り返されます)。また、DOM クエリの数を 2 つから 1 つに減らしました。

ところで、コードの他の部分で #myTab 要素への参照が必要な場合は、それを変数にキャッシュし、同じ要素に対して複数の DOM クエリを実行する代わりに、その変数を使用します。

于 2012-06-06T18:31:16.053 に答える
0

サーバー側からそのphp変数（$ tabname）を返すことができます。JavaScript で次のようにします。

var tabname = "<?php echo $tabname ?>"
// in case if other tab has this class, so remove it first safer side
jQuery('li').removeClass('active');
// add class to that required tab
jQuery('#'+tabname).parent('a').addClass('active');
于 2012-06-06T18:34:02.467 に答える
0 
$('#' + $subtabname).parent().addClass('active');
于 2012-06-06T18:30:49.877 に答える