css - CSS 活动属性无法正常工作

Question

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

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

对于活动字体和边框颜色，但是当我们单击某个菜单时，它的颜色和边框会发生变化，但在释放鼠标时会变回来。那么我们该如何解决这个问题呢？

Answer 1

没有简单的 CSS 方法来处理这个问题，因为link:active选择器适用于<a>被点击的 s。您可以通过定义一个li.activecss 类并通过 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');
});