0

我有几个用 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;}
4

2 回答 2

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

试试上面的代码。您不必缓存对象，除非您在代码片段中多次使用它。

并为

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

请注意，它不a.filter-checkboxes.active应该a.filter-checkboxes:active

类似的问题

于 2013-04-05T15:54:35.277 回答
0 
    $('.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;}

希望有帮助。

于 2013-04-05T16:01:48.790 回答