Question

我有一个简单的html菜单，使用CSS设置样式。

<div id="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></li>
    </ul>
</div>

我正在寻找的方法是通过导航菜单正确位置上的彩色背景向用户显示当前正在使用的页面。例如。当用户在职业页面上时，li框与菜单的其余部分颜色不同，表明它正在使用中。

Answer 1

您要做的是将类添加到当前活动的任何菜单项中。例如，index.html的HTML标记如下所示：

<div id="menu">
    <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></li>
    </ul>
</div>

career.html的标记看起来像这样：

<div id="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li class="active"><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></li>
    </ul>
</div>

然后相应地设定类的样式：

.active {
    background-color: red;
}

Answer 2

您可以通过添加'active'类来完成此操作。

当您在特定页面上时，您会将class="active"添加到您的链接（或li元素）。这就是wordpress和许多其他Web应用程序解决这个问题的方法。

请看这里：http://jsfiddle.net/Bm9E4/2/

Answer 3

在活动页面上，为该页面的LI添加一个.active类。

<div id="menu">
    <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></li>
    </ul>
</div>

然后为背景做CSS：

#main li.active { background-color:red; }

彩色背景显示活动导航页面HTML / CSS

3 个答案: