Question

我已经阅读了很多关于这个主题的StackOverflow线程，但它们似乎对我不起作用，请问你看看我做错了什么？

<div class="c menu-accordion">
<ul>
  <a href="#">
       <li class="yellow">Menu Item 5 </li>
  </a>
</ul>
</div>

.bkg-yellow,
.menu-accordion ul li.yellow {
background:#f5a906;
 }

.menu-accordion ul li.yellow:active {
background:#000;
}

我希望Selected列表项在选中/激活后保持黑色。目前，如果我按住鼠标单击列表项，它会变黑，但是当我释放时，它会恢复原来的颜色。

请参阅我创建的小提琴作为示例。 http://jsfiddle.net/eAhac/4/

Answer 1

正如我先前所说，并添加了Jacek关于重构代码check this Link

的评论

$('li').click(function(){
  $('li').removeClass('selected');
  $(this).addClass('selected');
});

Answer 2

您的HTML无效。我应该为HTML5提出类似的建议

<nav>
    <ul>
        <li><a href="/" title="Title MUST be here also">LINK</a></li>
    </ul>
</nav>

然后，应该将有效的伪类应用于锚点，如：

nav ul li a:active {background: #f00;}

但它只会在点击项目时工作，我认为：）。

<强>更新如果您需要保存单击元素，并且锚点具有事件阻止默认值，则应使用单击事件（JQuery）向其添加类。然后单击元素将具有其他类和另一种颜色/背景。如果您需要代码，请写下:)。

“提示：使用：link选择器设置指向未访问页面的链接的样式，使用：visited选择器设置指向已访问页面的链接的样式，并使用：hover选择器将鼠标悬停在样式链接上。”

http://www.w3schools.com/cssref/sel_active.asp

希望有所帮助

CSS Active菜单项不起作用？

2 个答案: