Как установить активное состояние для флажка с помощью JS/jQuery

Question

У меня есть пара функций, которые сортируют списки свойств с помощью php. Сортировка работает, однако мне нужно установить активные состояния для текущего активного клика href. Конечно, мне не повезло, если я установил это только с помощью CSS (хотя я включил свой снимок CSS ниже для справки), поэтому я пытаюсь сделать это с помощью jQuery, но пока не увенчался успехом. Вы можете найти мой php, jquery и css ниже. Если кто-то может вести меня в правильном направлении, я бы очень признателен за любую помощь. Заранее спасибо!

<div> 
    <?php 
     foreach(array('desc'=>$main_floor_master) as $asc_desc => $asc_desc_name) { 
     echo '<a class="filter-checkboxes" href="'; 
     echo add_query_arg(array('orderby' => main_floor_master, 'order' => $asc_desc) 
     ); 
     echo "\">Main Floor Master</a>"; 
     } 
    ?> 

    <?php 
     foreach(array('desc'=>$locality_status) as $asc_desc => $asc_desc_name) { 
     echo '<a class="filter-checkboxes" href="'; 
     echo add_query_arg(array('orderby' => status, 'order' => $asc_desc) 
     ); 
     echo "\">Quick Move In</a>"; 
     } 
    ?> 
</div> 


<!-- Active states --> 
<script> 
$(document).ready(function(){ 

    //active state 
    $(function() { 
     $('a').click(function(e) { 
      e.preventDefault(); 
      var $this = $(this); 
      $this.parent().addClass('active'); 

     }); 
    }); 
}); 
</script> 


<!-- CSS --> 
a.filter-checkboxes {color: #cacaca !important; font-weight: bold; background: url(images/btn-checkboxbg.jpg) no-repeat 0 0; padding-left: 24px; margin-left: 10px;} 
a.filter-checkboxes:active {color: #cacaca; font-weight: bold; background: url(images/btn-checkboxbg_selected.jpg) no-repeat 0 0; padding-left: 24px; margin-left: 10px;} 

Answer 1

$('a').click(function(e) { 
    e.preventDefault(); 
    $(this).addClass('active'); 
}); 

Попробуйте код, указанный выше. Вам не нужно кэшировать объект, если вы не используете его несколько раз в фрагменте кода.

и создать правило CSS для

a.active{ // 
    // style you want the active link to have 
} 

Обратите внимание, что она должна a.filter-checkboxes.active не a.filter-checkboxes:active

Similar question

Answer 2

$('.filter-checkboxes').click(function(e) { 
     e.preventDefault(); 
     $('.active').toggleClass('active'); 
     $(this).toggleClass('active'); 

    }); 

Это удалит предыдущий активный класс (Предполагая, что вы не можете иметь два вида активны одновременно) и задайте класс для элемента с новым щелчком. Кроме того, я изменил селектор, чтобы сделать его более конкретным, поэтому он не запускается на каждом теге <a> на странице.

изменить также CSS для:

a.filter-checkboxes {color: #cacaca !important; font-weight: bold; background: url(images/btn-checkboxbg.jpg) no-repeat 0 0; padding-left: 24px; margin-left: 10px;}  
a.filter-checkboxes.active {color: #cacaca; font-weight: bold; background: url(images/btn-checkboxbg_selected.jpg) no-repeat 0 0; padding-left: 24px; margin-left: 10px;} 

Надежда, что помогает.