Question

问题：

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

HTML code：

<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将生成一个变量$ subtabname，其中包含“参与者”或“等级值”。

情境：

如果我在#gradevalues并提交表单，则变量$ subtabname将包含“gradevalues”。我想jQuery喜欢从#participants中删除“active”类，然后将它添加到#gradevalues的li中。

问题：

我如何使用这个PHP变量来查找元素，并移动到它的父li以删除/添加“活动”类？

[更新]：非最佳工作jQuery代码

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

Answer 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查询。

Answer 2

$('#' + $subtabname).parent().addClass('active');

Answer 3

您可以从服务器端返回该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');

使用jQuery查找子链接并删除父类

3 个答案: