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 } ?> 

Ниже приведенный выше код является следующее, где у меня есть АЯКС вызов, который не имеет отношения к этому вопросу и где 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; 
} 

Там. Поэтому, когда я нажимаю вкладку, стиль изменяется, но когда я нажимаю другой, предыдущая вкладка, которую я нажал, остается стилизованной, когда она вернется к ее первоначальному виду. Эта вкладка, нажатая ранее, вернется к первоначальному стилю, когда я нажму на нее.

Что-то не так с моим кодом. Надеюсь, кто-то может помочь.

EDIT Я обновил свой код. Но все та же проблема.

Answer 1

Вы могли бы добавить к функции «успех» Аякса называют следующие строки:

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

В самом деле, вы можете также переместить addClass вызовы этой функции, а не создавать их в PHP. Вы должны убедиться, что вызов Ajax возвращает состояние успеха, если и только если в PHP:

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

Вероятно, это уже происходит.