更改当前所选li的css

Question

我有这个菜单：

<div id="menu-home">
    <ul>
        <li> a </li>
    </ul>
</div>

当我在与测试菜单对应的test.php页面上时，我需要它li才能拥有不同的风格..

我试过

#menu-home ul li:active 

但它不起作用..

由于

Answer 1

:active

没有<li>州

相反，你可以使用PHP。

<div id="menu-home">
<ul>
<li <?php if (page is current page) echo ' class="active"';?>> a </li>
</ul>
</div>

在CSS中，你可以这样说：

#menu-home ul li.active {}

Answer 2

<li>元素没有活动状态，因为它只是一个（无状态）项目符号点。选择器:active只能用于链接;可以找到一个示例here。

但是，:active只会在点击时突出显示该链接。之后，它执行设置的任何操作和/或导航，然后访问链接。从那以后，您无法区分其他已经访问过的页面，您当前没有查看这些页面，即使您导航到另一个页面，它也不会再次“未访问”。所以这不符合你的意图。

相反，我会在CSS中创建一个类.active，您可以在其中定义所有自定义样式。然后，生成页面的PHP需要在所选菜单项上正确设置类，即：每当class="active"或<li>时，它都会<a>。菜单正在构建。

（是的，只看Praveen对代码的回答^^）