活动 CSS 未被识别

Question

感觉好像遗漏了一些简单的东西，但已经盯着它看太久了，所以非常感谢您的帮助。

有一个水平导航，我希望元素在活动/当前页面时具有不同的背景颜色。我尝试了各种 class 标签，但都没有成功。请注意，我不能只使用 .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（仅在 A 标签中有效）

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

您需要一个有效的 class:

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

将您激活 class 添加到一个元素，否则它将使用默认样式...

Answer 3

我过去曾在代码上花费数小时后犯过同样的错误。我们都经历过这样愚蠢的错误。

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

将以下内容添加到您的 CSS：

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

根据您放置标签的位置，您可能需要删除其他选项，特别是如果您放置在 anchor/link HTML 标记中。您可能还需要添加以下内容以删除底线：

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

希望对您有所帮助！

Answer 4

当link变成: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>

在你的情况下，你使用 class 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 link，每次点击后，你必须使用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>

活动 CSS 未被识别

Active CSS Not Being Recognized

html

css

href