HTML导航栏问题(活动状态)
HTML导航栏问题(活动状态)
提问于 2016-09-30 20:35:07
我在设置导航栏的活动状态时遇到问题。当a处于活动状态时，我希望背景颜色发生变化。
我在下面添加了一个代码片段：
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>
但是当我运行网页时，活动链接不会改变颜色，有谁可以帮助我吗？
回答 2
Stack Overflow用户
发布于 2016-09-30 20:40:20
当您实际单击某个元素时，将应用该元素的:active状态。在这种情况下，您的代码运行得很好。有关: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>
Stack Overflow用户
发布于 2016-09-30 20:42:44
a:active指的是调用新页面时的状态，即从单击链接到新页面开始加载的那一刻。通常这段时间很短，所以你很难看到这种状态。
"active link“通常意味着:当前页面的菜单项/链接，它通过javascript被分配一个类似于"active”的类，因此应该是<a href="pages/start.php" class="active">Start</a>。
另外:在本例中，除了第一个链接之外，所有链接都指向同一页面上的本地锚/ID，因此前面提到的简单javascript在这种情况下不起作用。
所以我知道，这不是你的问题的解决方案，但它是为什么它不能像你明显期望的那样工作的答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39791673
复制相关文章
相似问题
腾讯云开发者
