Question

所以我有一个导航栏。使用Zurb构建：

<div class="seven columns navigation" id="navigation">
    <a href="#">Page1</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
    <a href="#">Page4</a>
    <a href="#">Page5</a>
 </div>

悬停时，导航会更改背景颜色。多数民众赞成。但是，如果链接处于活动状态，我无法保留背景。因此，如果您在第1页上保持蓝色背景。

这是我到目前为止尝试过的CSS。

.navigation a {
  font-size: 1.2em;
  display: inline-block;
  margin-top: 20px;
  padding: 8px 12px;
  color: #666666;
  font-weight: bold; }

.navigation a:hover{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

.navigation a.active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#navigation a .active-link{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

非它有效，我已经用Google搜索了这些负载，但是它们都表示主动链接应该有效吗？

谁能告诉我哪里出错了？对不起，如果简单的CSS不是我最强的语言。

编辑：

感谢您提出的建议

.navigation a:active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

也不起作用。

Answer 1

我发现这里有一个错误，因为它应该是:active而不是.active，所以请替换：

.navigation a.active {
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

使用：

.navigation a:active {
  background: #29abe2;
  border-radius: 5px; 
  color: #fff;
}

否则，如果您在谈论每个页面都处于活动状态，那么您编写的CSS是正确的。在HTML中，您需要添加以下内容：

<div class="seven columns navigation" id="navigation">
  <a href="#" class="active">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
</div>

现在，该特定链接将以活动状态显示。如果您使用HTML，则必须为每个页面完成，或者如果您使用的是PHP，则可以使用编程完成。因此，PHP中的相同内容是：

<div class="seven columns navigation" id="navigation">
  <a href="#"<?php if ($page == 1) echo ' class="active"'; ?>>Page1</a>
  <a href="#"<?php if ($page == 2) echo ' class="active"'; ?>>Page2</a>
  <a href="#"<?php if ($page == 3) echo ' class="active"'; ?>>Page3</a>
  <a href="#"<?php if ($page == 4) echo ' class="active"'; ?>>Page4</a>
  <a href="#"<?php if ($page == 5) echo ' class="active"'; ?>>Page5</a>
</div>

Answer 2

要解决这个问题，只需使用CSS技巧，您就需要使用选择器目标，首先为页面定义不同的id并将链接放到该引用，然后根据目标ID更改样式。

以下是JS Fiddle of the Solution with just CSS and HTML

但基本上它的工作原理如下：

以下是包含ID和目标更改的HTML

<div class="seven columns navigation" id="navigation">
    <a href="#page1" id="page1">Page1</a>
    <a href="#page2" id="page2">Page2</a>
    <a href="#page3" id="page3">Page3</a>
    <a href="#page4" id="page4">Page4</a>
    <a href="#page5" id="page5">Page5</a>
</div>

在所有css之后你需要根据目标改变样式：

#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

这是有效的，但通常是使用服务器端，例如ruby on rails，python，php，无论你感觉舒适哪种语言都能提供确切的url并使用简单的jQuery .addClass()或{ {3}}甚至.removeClass()将活动类放在正确的链接上。

希望它有帮助！干杯

Answer 3

你不能完全用纯CSS做你想做的事情。首先，当用户在该页面上时，您必须定义用于链接的类（就像您一样，但是您有错字）：

.navigation a.active-link {
      background: #29abe2;
      color: #fff;
      border-radius: 5px; 
}

接下来，您需要在用户访问该网页时将该类应用于该链接。所以，如果我在第1页上，导航将如下所示：

<div class="seven columns navigation" id="navigation">
    <a href="#" class="active-link">Page1</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
    <a href="#">Page4</a>
    <a href="#">Page5</a>
 </div>

Answer 4

a:visited实际上是您的'.active'状态。对于导致你想知道发生了什么的影响。

如果您打算尝试以这种方式使用它，则必须将其包含在a:伪类中。

为<a>元素建立“默认/重置”状态会阻止此类“WTF”？方案：

a:link { color:black }
a:hover { color:blue }
a:visited, a:active, a:focus { color:red }

当您希望特定链接在其相应页面上显示“突出显示”时，您最好使用ID或类（取决于您的使用情况）：

<a id="highlight">Home</a>
<a>About</a>
<a>Contact</a>

修改

再次重读您的问题。由于#navigation a .active-link{...和a之间的空格，.active-link无效。您实际上定位的是a的孩子，其姓名为active-link。修正＃1将是a.active-link。

忽略您正在阅读的有关PHP，Targeter等的内容。您似乎只是尝试使导航“突出显示”/更改为仅与导航中的链接匹配的页面。您可以使用直接的HTML / CSS轻松完成此操作（如果您遇到此问题，服务器端代码解决方案会让您更加沮丧）。请参阅我的答案中的三个<a>元素。然后将其添加到CSS（修复＃2）：

a#highlight { color:red }

我相信你的snafu都是使用类名的产品，它们与CSS中的'保留'名称太接近了（所以你错过了a.active vs a：active - 尽管两者都有效，但它们很容易当你校对你的代码时会错过。）（修复＃3）

Answer 5

最好在jQuery中用于浏览器兼容性

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  $( document ).ready(function() {
    var urlArray = window.location.pathname.split( '/' );
    var pagAtual =urlArray[urlArray.length -1];
    $("a[href*="+pagAtual+"]").css("color","#67E8A7");
  });
</script>

Answer 6

您需要创建一个活动类，然后手动将其分配给导航栏中的链接。

HTML + CSS不了解它们的位置，也不能理解

“好吧，我正在使用article.html，所以我会将文章链接激活。”

因此，您需要使用javascript或某些编程语言（如python，php，asp等）...当您在该页面上时将类分配给正确的链接，例如使用服务器端语言动态构建导航。

Answer 7

尝试用#navigation替换.navigation，有id =“navigation”，而不是类。

Answer 8

在其他新闻中，如果您在 mousedown 事件中拥有:action，则event.preventDefault()也将被取消。

这不适用于 click 和 mouseup 事件，您可以在不取消：action行为的情况下将它们使用preventDefault（）。我没有测试触摸事件，但我认为情况相同。

Answer 9

我遇到了同样的问题，但是我通过以下方式解决了这个问题，但是有些事情很奇怪：

app.component.html 文件：

<div class="container"> <nav class="navbar" > <form class="form-inline"> <a routerLinkActive="active" routerLink="list">List</a> <a routerLinkActive="active" routerLink="create" style="padding-left: 20px;">Create</a> </form> </nav> <router-outlet></router-outlet> </div>

app.component.css 文件：

/* unvisited link */ a.link { color: blue; } /* selected link */ a.active { color: hotpink; } /* visited link (This doesn't work well, so I don't use it in my app)*/ a.visited { color: green; } /* mouse over link */ a:hover { color: red; }

奇怪的事情：

对于活动链接颜色，“ a.active” 有效，而“ a：active” 不起作用；
对于悬停颜色，“ a：悬停” 有效，而“ a.hover” 不起作用 / strong>工作。

对于访问的链接颜色，如果我使用“ a：访问” ，则其他颜色将禁用。

还有其他情况，但要详细讨论太多了。

我花了很长时间才弄清楚。

顺便说一句， routerLinkActive =“ active” 是必需的。我只是为了测试就摆脱了它，但是它没有用。所以我放回去，然后工作正常。

Answer 10

我知道这是旧的，但是我在更改活动链接的颜色时遇到了问题，过了太久才意识到，因为我在测试时在本地托管站点，所以某些路径当然不一样，并且相应的链接实际上并未处于活动状态。

CSS活动链接无法正常工作

10 个答案: