CSS 事件属性无法正常工作

Question

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

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

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

Answer 1

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