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

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

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

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

可能已经是这样了。

jQuery在Clicked选项卡上添加类，在不在

1 个答案: