CSS Active Property not working fine

Question

请查看http://jsfiddle.net/mrto2/nD2eB/。
我已经给了

#filters li a:active { 
    border-top: 2px solid #EB2F26; 
    color: #EB2F26; 
    } 

主动字体和边框颜色，但是当我们点击了菜单，它的颜色和边框的变化上，但它原来的背部，同时鼠标释放。那么我们如何解决这个问题？

Answer 1

由于link:active选择器适用于<a>被点击，所以没有纯CSS的方式来处理这个问题。你可以通过定义一个li.active css类并通过js动态地将它添加到链接来解决这个问题。

li a.active { 
    border: 2px red solid; 
} 

<ul class="nav"> 
    <li><a>Link 1</a></li> 
    <li><a>Link 2</a></li> 
    <li><a>Link 3</a></li> 
    <li><a>Link 4</a></li> 
<ul> 

// Using Jquery 
$('ul.nav li').on('click', function(){ 
    $(this).parent().find('a').removeClass('active'); 
    $(this).addClass('active'); 
});