css - CSS アクティブプロパティが正常に動作しない

Question

http://jsfiddle.net/mrto2/nD2eB/をご覧ください。
私は与えました

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

アクティブなフォントと境界線の色ですが、メニューをクリックすると、その色と境界線が変わりますが、マウスを放すと元に戻ります。では、どうすればこれを修正できますか?.

score 0 · Accepted Answer

link:activeセレクターは<a>クリックされた s に適用されるため、これを処理する単純な CSS の方法はありません。css クラスを定義し、li.activeそれを 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');
});

css - CSS アクティブ プロパティが正常に動作しない