CSS Active Property无法正常工作

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