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

我有一个简单的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框的颜色将与菜单的其他部分不同，以显示它正在使用。

您可以通过添加一个

'active'

类来实现这一点

当您在某个页面上时，您将把

class=“active”

添加到您的链接（或li元素）中。这就是wordpress和许多其他web应用程序解决这个问题的方法

---

请看这里：

您要做的是向当前活动的任何菜单项添加一个类。例如，

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>

<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;
}

---

在活动页面上，将

.active

类添加到该页面的LI中

<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>

---

我刚修好。很抱歉：）谢谢，我已经做了，并且已经开始工作了。活动链接的背景现在是我想要的不同颜色。但是，在不同浏览器中查看时，活动链接的彩色背景“框”处于不同的位置。在FF中查看时，它处于完美的位置，但在chrome和IE中，如果有意义的话，框与菜单的顶部或底部重叠。这与我如何设计菜单有关吗？这是我的CSS:#菜单{最大宽度：960px；高度：30px；边距：0px自动；背景色：#d71900；边框顶部：2px黑色实心；}菜单li{显示：内联；左边距：50px；右边距：50px；填充：12px 2px 6px 2px；}菜单ul{边距顶部：4px；}。activelink{背景色：#b01803；}a{color:#ffffff；字体系列：Tahoma，Helvetica；字体重量：正常；字体大小：1.6em；文本装饰：无；}@markthornton90这似乎是一个不同的问题。我会继续写一篇新的文章来描述你的问题，这样你会得到更好的结果。

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