导航栏在单击 HTML 时更改颜色

Question

我在我的第一个网站上遇到了问题。我已经成功地在顶部创建了一个导航栏，它的外观和行为都符合我想要的方式(除了配色方案，但可以稍后再来(。问题是，每当我单击栏上的其他链接时，我都希望该框改变颜色，但它目前停留在主页上突出显示。我认为这是非常简单的事情，但我找不到它。谢谢你的帮助。

body
{
    font-family:sans-serif;
    width: 100%;
    margin: 0px;
}
/* upper strip holding the tabs*/
ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position:fixed;
    top: 0px;
    width: 100%;
    background-color: #328CC1
}
li
{
    float:left;
    border-right:3px solid #30FFE3;
}
li a
{
    display: block;
    color: whitesmoke;
    text-decoration: none;
    padding: 14px 16px;
    text-align: center;
}
li a:hover:not(.active) 
{
    background-color: #111;
}
a.active
{
    background-color: #EAB126
}

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#academics">Academics</a></li>
    <li><a href="#athletics">Athletics</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

Answer 1

更改以下内容：

a.active
  background-color: #EAB126
}

对此：

li a:focus {
  background-color: #EAB126
}

这是JSFiddle演示

这执行您的要求，但如果这是一个导航栏，请记住，一旦您更改页面，控件就会失去焦点。如果你使用Javascript/JQuery来更容易地处理这个问题会更好。

Answer 2

处理此问题的典型方法是让每个页面都有一个包含页面名称的类：例如<div class="academics">。

现在修改您的标题(在页面div 内(，如下所示：

        <ul>
            <li><a class="for_home" href="#home">Home</a></li>
            <li><a class="for_academics" href="#academics">Academics</a></li>
            <li><a class="for_athletics" href="#athletics">Athletics</a></li>
            <li><a class="forcontact" href="#contact">Contact</a></li>
        </ul>

接下来是 CSS，如下所示：

.home .for_home, .academics .for_academics, .athletics .for_athletics, .contact .for_contact {
  background-color: #EAB126;
}

然后，当前页面的菜单项将突出显示。

恭喜您的第一个网站！