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

希望有所帮助。

如何使用JS / jQuery为复选框设置活动状态

2 个答案: