1

问题：

我有一个包含两个选项卡的列表。当我提交表单并重新加载页面时，我想跟踪用户上次打开的选项卡以便再次激活它。

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 中。

问题：

我将如何使用 jQuery 使用此 PHP 变量查找元素并移至其父 li 以删除/添加“活动”类？

[更新]：非最佳工作 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' ));

我将类名作为字符串传递以避免代码重复（在您的代码中，类名字符串重复三遍）。我还将 DOM 查询的数量从两个减少到一个。

顺便说一句，如果您需要在代码的其他一些部分中引用 #myTab 元素，请将其缓存在一个变量中，并使用该变量而不是对同一元素执行多个 DOM 查询。

于 2012-06-06T18:31:16.053 回答
0 
$('#' + $subtabname).parent().addClass('active');
于 2012-06-06T18:30:49.877 回答
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 回答