jQuery在单击选项卡上添加类，并在未单击时删除

Question

我有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;
}

那里。 因此，当我单击一个选项卡时，样式会更改，但当我单击另一个选项卡时，样式会更改，但我单击的上一个选项卡将保留样式，前提是应恢复其原始外观。 之前单击的那个选项卡只有在我单击它时才会变回其原始样式。

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

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

Answer 1

您可以在ajax的“成功”功能中添加以下代码：

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

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

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

可能已经是这样了。