javascript - 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")

可能已经是这种情况了。