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