Question

每个<a链接都是jQuery隐藏（显示）某些div的锚点。

我正在使用这个CSS来处理悬停样式：

ul.textMenu a:hover

{   
    border-bottom: 3px solid #ff5c00;
    margin-bottom: -3px;
}

用户点击某个项目后，我希望border-bottom保持不变。我该怎么做？

menu http://i49.tinypic.com/inyfeu.png

Answer 1

添加css规则

ul.textMenu a.clicked

{   
    border-bottom: 3px solid #ff5c00;

}

然后是一些js

$('ul.textMenu a').click( function() {
    // Remove the class clicked so that we have only one clicked item
    // Since there might be more than one ul i finde the parent.
    $(this).closest('ul.textMenu').find('a').removeClass('clicked')
    $(this).addClass('clicked');
} );

Answer 2

jQuery('ul.textMenu a').click(function () {
    jQuery('ul.textMenu a').removeClass('active');
    jQuery(this).addClass('active');
});

设置你的css for ul.textMenu a.active以保持CSS边框

如何＆＃34;标记＆＃34; UL / LI导航项目为＆＃34;活跃＆＃34;基于点击？

2 个答案: