jQuery在单击的选项卡上添加类并在没有时删除答案

【问题标题】：jQuery Add Class on Clicked Tab and Remove When NotjQuery在单击的选项卡上添加类并在没有时删除
【发布时间】：2015-06-02 03:20:55
【问题描述】：

我有 3 个标签，即每月、双月和每周。当用户将列表中的一个设置为他的默认工资核算期时，该选项卡将处于活动状态。我通过在<script> 标签中执行此操作来实现它：

脚本标签中的 PHP：

<?php if ($session['period_type'] == "Monthly") { ?>
    $(".monthly").addClass("active"); 
    $(".monthly a").addClass("active-li");
    // $(".bi-monthly a, .weekly a").removeClass("active-li");
    // $(".bi-monthly, .weekly").removeClass("active"); 
<?php } else if ($session['period_type'] == "Bi-monthly") { ?>
    $(".bi-monthly").addClass("active"); 
    $(".bi-monthly a").addClass("active-li");
<?php } else if ($session['period_type'] == "Weekly") { ?>
    $(".weekly").addClass("active");
    $(".weekly a").addClass("active-li");
<?php } else { ?>
    // $(".monthly").removeClass("active");
    // $(".bi-monthly").removeClass("active");
    // $(".weekly").removeClass("active");
<?php } ?>

上面的代码如下，我有一个与这个问题无关的ajax调用和两行脚本，其中active-li类在单击某个选项卡时添加，然后在不单击时删除：

JavaScript：

$("#nav ul .monthly").click(function(){
    $.ajax({
        url: 'index.php?r=payslip/monthly',
        dataType: 'json',
        method: 'GET',
        data: {},
        success: function (data, textStatus, jqXHR) {                
            $.pjax.reload({container:'#monthly', type:'POST'});
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('An error occured!');
            alert('Error in ajax request');
        }
    });
    $("#nav ul .monthly a").toggleClass("active-li");
    //$("#nav ul .monthly a").removeClass("active-li");
});

CSS：

.active-li {
    color: rgb(65, 202, 191) !important;
    text-transform: uppercase;
}

那里。因此，当我单击一个选项卡时，样式会发生变化，但是当我单击另一个选项卡时，我单击的上一个选项卡仍保持样式，假设它恢复到其原始外观。之前单击的选项卡只有在我单击它时才会变回原来的样式。

我的代码有问题。希望有人能帮忙。

编辑我更新了我的代码。但还是同样的问题。

【问题讨论】：

您是否尝试在代码的最后部分删除.not(this)？然后更改顺序..首先删除active-li然后添加活动li
我刚刚删除了它。但没有回答我的问题。

标签： javascript php jquery css tabs

【解决方案1】：

您可以在 ajax 调用的“成功”函数中添加以下行：

$(".bi-monthly a, .weekly a").removeClass("active-li");
$(".bi-monthly, .weekly").removeClass("active");

事实上，您也可以将 addClass 调用移至该函数，而不是在 PHP 中生成它们。当且仅当在 PHP 中时，您必须确保 ajax 调用返回成功状态：

if ($session['period_type'] == "Monthly")

可能已经是这样了。

【讨论】：