未识别活动CSS
未识别活动CSS
提问于 2018-08-16 04:37:21
我觉得我错过了一些简单的东西，但我已经盯着它看了太久，所以任何帮助都是感激不尽的。
我有一个水平导航，我希望元素在活动/当前页面时具有不同的背景颜色。我已经尝试了各种类标签，但都没有成功。请注意，我不能只使用.active标记，因为我需要它只在添加的导航上起作用。
这是我所拥有的和我尝试过的：
CSS代码
.nav2 {
border: 1px solid #e7e7e7;
border-width: 1px 0;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
overflow: hidden;
}
.nav2 li {
Float: left;
}
.nav2 a {
display: block;
padding: 10px 20px;
color: #666;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
font-size: 16px;
text-decoration: none;
}
.nav2 a:active {
background-color: #0066CC;
color: white;
}
.nav2 a:hover {
background-color: #555;
color: white;
}尝试1(仅在LI标记中-活动)
<ul class="nav2">
<li class="active"><a href="one.aspx">Page One</a></li>
<li><a href="two.aspx">Page Two</a></li>
<li><a href="three.aspx">Page Three</a></li>
</ul>尝试2(在标签中-仅活动)
<ul class="nav2">
<li><a class="active" href="one.aspx">Page One</a></li>
<li><a href="two.aspx">Page Two</a></li>
<li><a href="three.aspx">Page Three</a></li>
</ul>尝试3(在LI标记中)
<ul class="nav2">
<li class="nav2 active"><a href="one.aspx">Page One</a></li>
<li><a href="two.aspx">Page Two</a></li>
<li><a href="three.aspx">Page Three</a></li>
</ul>尝试4(在标签中)
<ul class="nav2">
<li><a class="nav2 active" href="one.aspx">Page One</a></li>
<li><a href="two.aspx">Page Two</a></li>
<li><a href="three.aspx">Page Three</a></li>
</ul>我遗漏了什么？
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-08-16 10:17:09
当链接变为:active时，用户按下鼠标，当离开鼠标时，因此删除active：查看此内容(单击菜单并查看结果)：
.nav2 {
border: 1px solid #e7e7e7;
border-width: 1px 0;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
overflow: hidden;
}
.nav2 li {
float: left;
}
.nav2 a {
display: block;
padding: 10px 20px;
color: #666;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
font-size: 16px;
text-decoration: none;
}
.nav2 a:hover {
background-color: #555;
color: white;
}
.nav2 a:active {
background-color: #0066CC;
color: white;
}<ul class="nav2">
<li ><a class="active" href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
</ul>
在您的示例中，您使用的是active类，因此必须使用.而不是:，如下所示：
.nav2 {
border: 1px solid #e7e7e7;
border-width: 1px 0;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
overflow: hidden;
}
.nav2 li {
float: left;
}
.nav2 a {
display: block;
padding: 10px 20px;
color: #666;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
font-size: 16px;
text-decoration: none;
}
.nav2 a.active {
background-color: #0066CC;
color: white;
}
.nav2 a:hover {
background-color: #555;
color: white;
}<ul class="nav2">
<li ><a class="active" href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
</ul>
如果你想在每次点击之后看到active链接，你必须使用jquery：
$(document).ready(function() {
$('a').click(function() {
$('.nav2 a').removeClass('active');
$(this).addClass('active');
})
})
$(document).ready(function() {
$('a').click(function() {
$('.nav2 a').removeClass('active');
$(this).addClass('active');
})
}).nav2 {
border: 1px solid #e7e7e7;
border-width: 1px 0;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
overflow: hidden;
}
.nav2 li {
float: left;
}
.nav2 a {
display: block;
padding: 10px 20px;
color: #666;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
font-size: 16px;
text-decoration: none;
}
.nav2 a.active {
background-color: #0066CC;
color: white;
}
.nav2 a:hover {
background-color: #555;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="nav2">
<li ><a class="active" href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
</ul>
Stack Overflow用户
发布于 2018-08-16 04:42:11
您需要一个活动类：
.active {background-color: #0066CC; color: white;}Stack Overflow用户
发布于 2018-08-16 04:43:50
.active {
color:red;
}<ul class="nav2">
<li class="nav2"><a href="one.aspx" class="active">Page One</a></li>
<li><a href="two.aspx">Page Two</a></li>
<li><a href="three.aspx">Page Three</a></li>
</ul>
将您的活动类添加到元素，否则它将使用默认样式...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51866060
复制相关文章
相似问题