html - CSS活动链接不起作用

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>

悬停时，导航会更改背景颜色。那很简单。但是，如果链接处于活动状态，我无法让背景保持不变。因此，如果您在 page1 上，它将保持蓝色背景。

这是我到目前为止尝试过的 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; }

不起作用，我用谷歌搜索了这个负载，但都说活动链接应该工作？

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

编辑：

感谢您的建议，但是

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

也不行。

score 14 · Accepted Answer

我看到这里有一个错误，应该是: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>

score 2 · Accepted Answer

你不能用纯 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>

score 2 · Accepted Answer

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{...之间的空间，不适合您。您实际上是针对类名为. 修复 #1 将是.a.active-linkaactive-linka.active-link

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

a#highlight { color:red }

我相信您的混乱都是使用与 CSS 中的“保留”名称太接近的类名称的产物（因此您错过了 a.active 与 a:active ——即使两者都是有效的，但很容易错过你正在校对你的代码）。（修复＃3）

score 2 · Accepted Answer

要仅通过 CSS 技巧解决此问题，您需要使用 Selector Target，首先为页面分配不同的 id 并将链接放置到该引用，然后根据目标 ID 更改样式。

这是仅使用 CSS 和 HTML 的解决方案的 JS Fiddle

但本质上它是这样工作的：

这是您的 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>

毕竟，您需要根据目标更改样式，如下所示：

#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()或.removeClass()或甚至.toggleClass()将活动类放在正确的链接上。

希望能帮助到你！干杯

score 1 · Accepted Answer

更好地在 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>

score 0 · Accepted Answer

0

Try to replace .navigation with #navigation, there is id="navigation",not a class.

于 2014-09-01T19:17:09.853 回答

score 0 · Accepted Answer

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

HTML + CSS 不知道他们在哪里，不能去哪里

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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:hover”有效，而“a.hover ”无效。
对于访问的链接颜色，如果我使用"a:visited"，其他颜色将被禁用。

还有一些其他的情况，但细节太多了。

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

顺便说一句，routerLinkActive="active"是必要的。我只是为了测试它而摆脱它，但它没有用。所以我把它放回去了，然后它工作得很好。

score 0 · Accepted Answer

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

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

html - CSS活动链接不起作用

10 回答 10

Related

Reference