Html CSS 活动链接不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14898015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Active link not working
提问by Bohdi
So I have a nav bar. Built using Zurb:
所以我有一个导航栏。使用 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>
On hover the navigation changes the background color. Thats simple. However I can not get the background to stay if the link is active. So if your on page1 it stays with a blue background.
悬停时，导航会更改背景颜色。那很简单。但是，如果链接处于活动状态，我将无法保留背景。因此，如果您在第 1 页上，它会保留蓝色背景。
Here is the CSS i have tried so far.
这是我迄今为止尝试过的 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; }
Non of it works, I have googled this loads, but it all says active-link should work?
它不起作用，我用谷歌搜索了这些负载，但都说活动链接应该有效？
Can anyone tell me where I am going wrong? Sorry if its simple CSS isn't my strongest language.
谁能告诉我我哪里出错了？抱歉，如果它的简单 CSS 不是我最强的语言。
EDIT:
编辑：
Thanks for the suggestions, however
谢谢你的建议，不过
.navigation a:active{
background: #29abe2;
color: #fff;
border-radius: 5px; }
doesn't work either.
也不起作用。
回答by Praveen Kumar Purushothaman
I saw that there's an error here, as it should be :activeand not .active, so replace:
我看到这里有一个错误，应该是:active而不是.active，所以替换：
.navigation a.active {
background: #29abe2;
color: #fff;
border-radius: 5px;
}
With:
和：
.navigation a:active {
background: #29abe2;
border-radius: 5px;
color: #fff;
}
Else, if you are talking about each page having an active state, then what CSS you have written is correct. In your HTML, you need to add this:
否则，如果您谈论的每个页面都处于活动状态，那么您编写的 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>
Now, that particular link will be displayed in the active state. It has to be done for each page, if you are using HTML, or it can be done using programming if you are using something like PHP. So, the same thing in PHP would be:
现在，该特定链接将显示为活动状态。如果您使用 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>
回答by Lucas Lazaro
To solve that with just CSS tricks you'll need to use the Selector Target, first you attribute different id for the pages and put the link to that reference, then you change the style base on the ID that is being target.
为了仅使用 CSS 技巧解决这个问题，您需要使用 Selector Target，首先为页面赋予不同的 id 并将链接放置到该引用，然后根据目标 ID 更改样式。
Here is the JS Fiddle of the Solution with just CSS and HTML
这是解决方案的JS Fiddle，只有 CSS 和 HTML
But essentially it works like this:
但本质上它是这样工作的：
Here is your HTML with the id and target changes
这是带有 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>
And after all that css you need to change the style based on the target like so:
毕竟，您需要根据目标更改样式，如下所示：
#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{
background: #29abe2;
color: #fff;
border-radius: 5px;
}
This works, but the usual is to use a server side, such as ruby on rails, python, php, whatever language you feel confortable that will provide the exact url and that use a simple jQuery .addClass()or .removeClass()or even .toggleClass()to put the active class on the right link.
这是有效的，但通常是使用服务器端，例如 ruby on rails、python、php，任何你觉得舒服的语言都会提供确切的 url 并使用简单的 jQuery .addClass()或.removeClass()或甚至.toggleClass()将活动类放在正确的链接上。
Hope It Helps! Cheers
希望能帮助到你！干杯
回答by Geraldo Vilger
Better to use in jQuery for browser compatibility
最好在 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>
回答by Matt McHugh
You can't quite do what you want to do with pure CSS. First, you have to define the class to use for a link when the user is on that page (like you did, but you have a typo):
你不能完全用纯 CSS 做你想做的事。首先，当用户在该页面上时，您必须定义用于链接的类（就像您所做的那样，但您有一个错字）：
.navigation a.active-link {
background: #29abe2;
color: #fff;
border-radius: 5px;
}
Next, you need to apply that class to the link when the user visits that page. So, if I'm on Page 1, the navigation would look like this:
接下来，当用户访问该页面时，您需要将该类应用于链接。因此，如果我在第 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>
回答by Dawson
a:visitedis actually your '.active' state. For the effect that was causing you to wonder what was going on.
a:visited实际上是您的“.active”状态。对于让你想知道发生了什么的效果。
You've got to include it in your a:pseudo classes if you're going to try and utilize it that way.
a:如果您要尝试以这种方式使用它，就必须将它包含在您的伪类中。
Establishing a "default/reset" state for your <a>elements will prevent this type of "WTF?" scenarios:
为您的<a>元素建立“默认/重置”状态将防止这种类型的“WTF？” 场景：
a:link { color:black }
a:hover { color:blue }
a:visited, a:active, a:focus { color:red }
When you want a particular link to show "highlighted" on its corresponding page, you're best off to use an ID or Class (depending on your usage):
当您希望特定链接在其相应页面上显示“突出显示”时，最好使用 ID 或类（取决于您的使用情况）：
<a id="highlight">Home</a>
<a>About</a>
<a>Contact</a>
EDIT
编辑
Reread your question again. #navigation a .active-link{...isn't working for you because of the space between aand .active-link. You're actually targeting a child of awith the class name of active-link. Fix #1 would be a.active-link.
再次重读你的问题。#navigation a .active-link{...不工作，因为之间的空间为您a和.active-link。您实际上是针对a类名称为的孩子active-link。修复 #1 将是a.active-link.
Disregard what you're reading above about PHP, Targeter, etc. It seems that you're just trying to make your navigation 'highlight'/change for just the page that matches the link in the nav. You can easily do this with straight HTML/CSS (if you have problems with this, server-side code solutions will just frustrate you more). See the three <a>elements in my answer. Then add this to your CSS (Fix #2):
忽略您在上面阅读的有关 PHP、Targeter 等的内容。似乎您只是想使导航“突出显示”/仅针对与导航中的链接匹配的页面进行更改。您可以使用直接的 HTML/CSS 轻松完成此操作（如果您遇到此问题，服务器端代码解决方案只会让您更加沮丧）。请参阅<a>我的答案中的三个要素。然后将其添加到您的 CSS（修复 #2）：
a#highlight { color:red }
I believe that your snafu is all a product of using class names that are too close to 'reserved' names in CSS (so you missed a.active vs a:active -- even though both ARE VALID, they're easy to miss when you're proofreading your code). (Fix #3)
我相信你的混乱都是使用与 CSS 中的“保留”名称太接近的类名的产物（所以你错过了 a.active 与 a:active——即使两者都是有效的，当你正在校对你的代码）。（修复＃3）
回答by Ryan McDonough
You will need to create an active class and then assign that to the links in the navbar manually.
您需要创建一个活动类，然后手动将其分配给导航栏中的链接。
HTML + CSS have no understanding of where they are and can't go
HTML + CSS 不了解他们在哪里，也不能去
"Well I'm on article.html so i'll make the article link active."
“好吧，我在 article.html 上，所以我会激活文章链接。”
So you need to either use javascript or some programming language such as python, php, asp etc... to assign a class to the correct link when you are on that page e.g Build the navigation dynamically using a server side language.
因此，当您在该页面上时，您需要使用 javascript 或某些编程语言（例如 python、php、asp 等）将类分配给正确的链接，例如使用服务器端语言动态构建导航。
回答by AlexB.
Try to replace .navigation with #navigation, there is id="navigation",not a class.
尝试用#navigation 替换.navigation，有id="navigation"，而不是一个类。
回答by mikiqex
In other news, :actionis also cancelled if you have event.preventDefault()on mousedownevent.
其他消息方面，:action如果有也会被取消event.preventDefault()的鼠标按下事件。
This doesn't apply to clickand mouseupevents though, you can use preventDefault() with them without cancelling :action behavior. I didn't tested touch events, but I assume it will be the same case.
不过，这不适用于click和mouseup事件，您可以在不取消 :action 行为的情况下对它们使用 preventDefault() 。我没有测试触摸事件，但我认为它会是同样的情况。
回答by William Hou
I got the same problem, but I solved it the following way, but some things are weird:
我遇到了同样的问题，但我通过以下方式解决了它，但有些事情很奇怪：
The app.component.htmlfile:
该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>
The app.component.cssfile:
该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;
}
Weird things:
奇怪的事情：
For active link color, "a.active"works, while "a:active"does NOTwork;
For hover color, "a:hover"works, while "a.hover"does NOTwork.
For visited link color, if I use "a:visited", other colors will be disabled.
对于活动链接的颜色，“a.active”的作品，而“一：激活”确实不工作;
对于悬停颜色，“一：悬停”的作品，而“a.hover”确实不工作。
对于访问过的链接颜色，如果我使用"a:visited"，其他颜色将被禁用。
There are still other cases, but it'd be too much to talk in details.
还有其他一些情况，但详细讨论太多了。
It took me a long time to figure it out.
我花了很长时间才弄明白。
By the way, routerLinkActive="active"is necessary. I got rid of it just to test it, and it didn't work. So I put it back, and then it worked fine.
顺便说一下，routerLinkActive="active"是必要的。我摆脱它只是为了测试它，但它没有用。所以我把它放回去，然后它工作正常。
