Question

感觉我缺少一些简单的东西，但是盯着它看了太长时间，所以不胜感激。

有一个水平导航，我希望元素处于活动状态时/当前页面具有不同的背景颜色。我尝试了各种类标记，但均未成功。请注意，我不能只使用.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;
}

ATTEMPT 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>

ATTEMPT 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>

ATTEMPT 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>

ATTEMPT 4（在A标签中）

<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>

我想念什么？

Answer 1

您需要一个活跃的班级：

.active  {background-color: #0066CC; color: white;}

Answer 2

.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>

将活动类添加到元素中，否则它将使用默认样式...

Answer 3

过去花了几个小时编写代码后，我也犯了同样的错误。我们所有人都会遇到这样的愚蠢错误。

所有标记都很好，但是您只是忘记在CSS文件中添加“ .active”类。

将以下内容添加到CSS：

.active { 
   background-color: #0066CC;
   color: white;  
}

取决于放置标记的位置，您可能需要删除其他选项，特别是如果放置在锚定/链接HTML标记中。您可能还需要添加以下内容以删除底线：

.active {
   background-color: #0066CC;
   color: white;
   text-decoration: none;
}

希望这会有所帮助！

Answer 4

当链接变为: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>

Active CSS无法识别

4 个答案: