css - 在没有 jquery 或 javascript 的情况下单击将 css 应用于 li

Question

这是我的html代码

<div id="menus">
    <ul>
        <li><a href="HomePage.html">Home</a></li>
        <li><a href="#">Users</a></li>
        <li><a href="#">Project Manage</a></li>
        <li><a href="#">Transaction</a></li>
        <li style="border-right:none;"><a href="#">Logout</a></li>
    </ul>
</div>

这是我的 CSS

#menus li
{
    float:left;
    list-style-type: none;
    padding-left: 25px;
    padding-right: 25px;
    border-right:groove 1px #FFFFFF;
    background: #666666;
}

#menus li:hover
{
    background: #999999;
}

#menus li a
{
    font-size:24px;
    text-decoration:none;
    color:#FFFFFF;
}

#menus li a:hover
{
    color:#000000;
}

现在我想在用户单击 li 时更改 css（例如显示当前选择的内容）。我可以只使用css吗？如果是那怎么办？？

提前致谢..

Answer 1

您可以仅使用 CSSfocus和tabindex

演示http://jsfiddle.net/kevinPHPkevin/LstNS/4/

li:focus  {
  background: red;
  outline: 0;
}

采用“活动”菜单项解决方案的一个好方法是

演示http://jsfiddle.net/kevinPHPkevin/LstNS/6/

来源：http ://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

Answer 2

不，你不能只用css. 我不太确定该说什么...

如果您希望特定页面处于活动状态，请在后端放置一个不同的类，例如：

<a href="#" class="active"></a>