Kyl*_*yle 0 html javascript css jquery
每个<a链接都是jQuery隐藏(显示)某些div的锚点。
我正在使用此CSS处理悬停样式:
ul.textMenu a:hover
{
border-bottom: 3px solid #ff5c00;
margin-bottom: -3px;
}
Run Code Online (Sandbox Code Playgroud)
用户单击一个项目后,我希望该项目border-bottom继续存在。我该怎么做呢?
添加CSS规则
ul.textMenu a.clicked
{
border-bottom: 3px solid #ff5c00;
}
Run Code Online (Sandbox Code Playgroud)
然后一些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');
} );
Run Code Online (Sandbox Code Playgroud)