logo标签列表

CSS活动链接无法正常工作

htmlcss
10

我有一个导航栏，使用了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; }

所有方法都不起作用，我已经谷歌了很多次，但都说应该使用active-link？

有人可以告诉我哪里出错了吗？如果很简单请原谅，CSS不是我的强项。

编辑：

谢谢大家的建议，不过

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

也不起作用。

如果活动样式与悬停样式不同，那将会有所帮助。这样你就能真正看到它的工作原理了。 - James Coyle
除非您的网站有服务器端语言，否则它无法理解所在的页面，并且无法像“我是第7页，所以我将使Page7.html链接处于活动状态”这样操作。 - Ryan McDonough
使用类名如“.active”会引起头痛。a元素伪类包括：:link, :hover, :visited, :active, :focus。 - Dawson
11个回答
16

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

现在，该特定链接将显示为active状态。如果您使用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>
这还是不行，我现在更加困惑了，悬停效果可以，而且我也完全复制了你的示例，但仍然没有成功。 :/ - Bohdi
你能提供一个 Fiddle 给我们吗？ - Praveen Kumar Purushothaman
我会尝试建立一个并回复你。 :) - Bohdi
@Dawson 我已经删除了不正确的文本。而且，我理解OP想要不同的活动状态来适应不同的页面。我做得对吗？ - Praveen Kumar Purushothaman
1
从技术上讲，是的。但我仍然有问题，即受访者提供的名称约定很差，而Up Voted答案并没有解决这个问题。.active是有效的...但对于一个用于<a>元素的类来说，这是一个糟糕的名称 - 特别是糟糕的。我取消了我的反对票。但我认为受访者正在得到快速修复，而不会选择更好的命名方式。 - Dawson
显示剩余8条评论
2

使用纯CSS无法完全实现你想要的效果。首先，你需要定义一个类来表示用户在该页面上时使用的链接（就像你所做的那样，但是你有一个拼写错误）：

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

接下来，当用户访问该页面时，您需要将该类应用于链接。因此，如果我在第一页上，导航将如下所示：

<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>
a .active-link 不是指定一个带有 active-link 类的 <a> 子元素吗？ - Dawson
啊，谢谢你指出来。那一行有两个错别字，我忘记修正了那一个。已经编辑好以反映正确的代码。 - Matt McHugh
2

a:visited实际上是你的“活动”状态。这就是导致你不知道发生了什么效果的原因。

如果你想要利用这种方式，你必须在a:伪类中包含它。

为你的<a>元素建立一个“默认/重置”状态将防止这种“WTF？”情况发生：

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

当你想在对应页面上展示一个特定链接时，“高亮”显示，最好使用ID或Class（根据你的使用情况而定）：

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

编辑

请再仔细阅读您的问题。因为#navigation a .active-link{...中a和.active-link之间有空格，所以它无法正常工作。实际上，您是在定位一个名为active-link的a子元素。解决方法1是使用a.active-link。

忽略关于PHP、Targeter等的内容。看起来您只是想让导航栏高亮显示与链接匹配的页面。您可以轻松使用纯HTML/CSS实现这一点（如果您遇到问题，服务器端代码解决方案只会更加令人沮丧）。请参考我的答案中的三个<a>元素。然后将以下内容添加到您的CSS中（解决方法2）：

a#highlight { color:red }

我认为你的问题是因为在CSS中使用了太接近“保留”名称的类名（比如a.active和a:active），虽然两者都是有效的，但当你校对代码时很容易忽略。建议更改类名以避免混淆。(解决方法#3)

2
要仅使用 CSS 技巧解决这个问题，您需要使用选择器目标。首先，为页面分配不同的 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>

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

希望有所帮助！祝好

抱歉，我知道这个问题很老了，但我看不出active有任何作用。我尝试了你的jsfiddle并删除了相关的css，但我无法发现任何不同之处。a.active和a .active-link是用来做什么的？http://jsfiddle.net/hRxr2/605/ - Altimus Prime
嗨，回复晚了！我猜.active和.actve-link并没有真正起到什么作用：）。这里的诀窍是使用:target CSS选择器来激活样式，而不是使用JavaScript修改DOM。 - Lucas Lazaro
1
最好在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>
0
您需要创建一个活动类并将其手动分配给导航栏中的链接。 HTML + CSS 对它们所处的位置没有理解和控制。
“嗯，我在article.html上，所以我会使文章链接活动。”
因此，您需要使用JavaScript或某些编程语言（如Python、PHP、ASP等）来在页面上正确的链接时为其分配类，例如使用服务器端语言动态构建导航。
0
尝试将 .navigation 替换为 #navigation，因为这里使用的是 id="navigation" 而不是 class。
0

我知道这很老，但我在更改活动链接的颜色时遇到了问题，后来意识到由于我在测试时本地托管网站，因此某些路径肯定不同，相应的链接实际上并不活动。

0
在其他消息中，如果您在mousedown事件上使用event.preventDefault()，:action也会被取消。
但是，这不适用于click和mouseup事件，您可以在它们中使用preventDefault()而不会取消:action的行为。我没有测试过触摸事件，但我认为情况将是相同的。
0
我遇到了同样的问题，但是我是用以下方法解决的，但有些事情很奇怪： 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;
    }

enter image description here

奇怪的事情：

  1. 对于活动链接颜色，"a.active"有效，而"a:active"无效；

  2. 对于悬停颜色，"a:hover"有效，而"a.hover"无效。

  3. 对于已访问链接颜色，如果我使用"a:visited"，其他颜色将被禁用。

还有其他情况，但详细讲述会太多了。

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

顺便说一下，routerLinkActive="active"是必要的。我把它去掉只是为了测试，结果不起作用。所以我把它放回去，然后它就正常工作了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接