html - 显示事件导航页面 HTML/CSS 的彩色背景

Question

我有一个使用 CSS 设置样式的简单 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><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;
}