jQuery 在单击的选项卡上添加 Class 并在未单击时删除

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 class 添加时单击某些选项卡然后在未单击时将其删除：

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 调用行的 "success" 函数：

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

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

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

可能已经是这种情况了。

jQuery 在单击的选项卡上添加 Class 并在未单击时删除

jQuery Add Class on Clicked Tab and Remove When Not

javascript

css

php

jquery

tabs