我觉得我错过了一些简单的东西,但我已经盯着它看了太久,所以任何帮助都是感激不尽的。
我有一个水平导航,我希望元素在活动/当前页面时具有不同的背景颜色。我已经尝试了各种类标签,但都没有成功。请注意,我不能只使用.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>
我遗漏了什么?
发布于 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>
发布于 2018-08-16 04:42:11
您需要一个活动类:
.active {background-color: #0066CC; color: white;}
发布于 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>
将您的活动类添加到元素,否则它将使用默认样式...
https://stackoverflow.com/questions/51866060
复制相似问题