在没有使用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来实现？如果可以，怎么做？

提前感谢。

- Sohil Desai

---

你想让它显示得好像用户在那个页面上吗？还是你想要一个：活动的？ - Josh Crozier

另外，A标签应该具有点击事件，而不是LI。 - Diodeus - James MacFarlane

@Diodeus：是的，我知道，但我正在寻找其他解决方案。 - Sohil Desai

@SohilDesai 哪一个？我列出了两个选项。一个伪类或 class="active"，表示你正在该页面上... - Josh Crozier

@JoshC：关于用户正在该页面上。 - Sohil Desai

Answer 1

你可以只使用CSS来实现，使用focus和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/

- Kevin Lynch

---

给出反对意见的人 - 请解释一下，如果您反对一个回答，至少有礼貌地留下评论。 - Kevin Lynch

啊，聪明，我在想他是指当他们选择 a 时的意思。 :) - Phil

@Phil，这可能不是你或我为活动菜单项分配类的方式，但我只是以原始形式回答问题“在没有jQuery或JavaScript的情况下单击应用CSS到li”。问题不是“最好的方法是什么...” :) - Kevin Lynch

@Phil，谢谢，我知道你没点踩，我有点同时回答两个问题 :/ - Kevin Lynch

LI不可聚焦，即使我添加了tabindex='0'，background: red？在您的演示中只有字体颜色是红色。 - bdalina

Answer 2

不，仅使用CSS无法实现此功能。我不太确定该说些什么...

如果您想在特定页面上激活某个元素，请在后端放置一个不同的类，例如：

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

- Phil