html - 单击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
}

Here is the JSFiddle demo

这会按照您的要求进行操作，但是如果这是一个导航栏，那么请记住，一旦您更改页面，该控件就会失去焦点。如果您使用 Javascript/JQuery 来更轻松地处理它会更好。