HTML导航栏问题（活动状态）
问题描述：
我在设置导航栏活动状态时遇到问题。 我希望当a处于活动状态时更改背景颜色。HTML导航栏问题（活动状态）
我添加以下代码片段：
nav {
font-size: 30px;
color: #ffffff;
}
ul {
list-style-type: none;
padding: 0px;
overflow: hidden;
}
li {
float: left;
}
nav li a {
display: block;
padding-top: 38.5px;
padding-bottom: 38.5px;
padding-left: 21px;
padding-right: 21px;
background-color: #000000;
text-decoration: none;
color: #3a9eb2;
font-size: 20px;
}
nav li a:hover {
background-color: #3a9eb2;
opacity: 0.7;
color: #000000;
}
/* problem*/
nav li a:active {
background-color: #ffffff;
}<nav>
<ul>
<li><a href="#">HOME</a>
</li>
<li><a href="#">RT SERIES</a>
</li>
<li><a href="#">ATV NR6</a>
</li>
<li><a href="#">ABOUT US</a>
</li>
</ul>
</nav>但是当我运行的网页不是活动链接不改变颜色，任何一个可以帮助
答
的当您实际单击某个元素时，将应用元素的状态。对于这种情况，你的代码工作正常。有关:active on MDN的更多信息
如果您的意思是作为当前页面激活，您需要通过Javascript或PHP应用其他类。
nav {
font-size: 30px;
color: #ffffff;
}
ul {
list-style-type: none;
padding: 0px;
overflow: hidden;
}
li {
float: left;
}
nav li a {
display: block;
padding-top: 38.5px;
padding-bottom: 38.5px;
padding-left: 21px;
padding-right: 21px;
background-color: #000000;
text-decoration: none;
color: #3a9eb2;
font-size: 20px;
}
nav li a:hover {
background-color: #3a9eb2;
opacity: 0.7;
color: #000000;
}
/* problem*/
nav li a:active {
background-color: #ffffff;
}<nav>
<ul>
<li><a href="index.htm">HOME</a>
</li>
<li><a href="#">RT SERIES</a>
</li>
<li><a href="#">ATV NR6</a>
</li>
<li><a href="#">ABOUT US</a>
</li>
</ul>
</nav>
答
a:active意味着同时一个新的页面被称为状态，即从目前看，当你点击链接到新的页面开始加载。通常这很短，所以你几乎看不到那个状态。
“活动链接”往往意味着：当前页面，该页面通过JavaScript被分配一类像“主动”的菜单项/链接，所以这将是<a href="pages/start.php" class="active">Start</a>
加：在你的情况，除了所有链接第一个指向同一页面上的本地锚/ ID，所以前面提到的一个简单的JavaScript在这种情况下不起作用。
所以我知道，这不是你的问题的解决方案，但它是一个答案，为什么它不能正常工作，因为你有期望它。
在Chrome，Firefox和IE中工作正常→背景变为白色。你确定你明白'：active'应该如何工作吗？ – hungerstar
你知道'：active'状态是如何工作的吗？这是当你点击一个项目 - > https://jsfiddle.net/azizn/72qur8wo/基本上，如果你点击快速的效果可能是钝的，你可以保持点击看到它更清楚 – Aziz