CSS活动链接不工作 [英] CSS Active link not working

问题描述

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

 < div class =seven columns navigationid =navigation> 
< a href =＃> Page1< / a> 
< a href =＃>第2页< / a> 
< a href =＃> Page3< / a> 
< a href =＃>第4页< / a> 
< a href =＃>第5页< / a> 
< / div> 
  

悬停时，导航栏会更改背景颜色。这很简单。但是，如果链接处于活动状态，我无法保留背景。因此，如果您在第1页上保持蓝色背景。

以下是我迄今已尝试过的CSS。

  .navigation a {
 font-size：1.2em; 
 display：inline-block; 
 margin-top：20px; 
 padding：8px 12px; 
颜色：＃666666; 
 font-weight：bold; } 
 
。导航a：悬停{
背景：＃29abe2; 
颜色：#fff; 
 border-radius：5px; } 
 
。导航a.active {
背景：＃29abe2; 
颜色：#fff; 
 border-radius：5px; } 
 
 #navigation a .active-link {
 background：＃29abe2; 
颜色：#fff; 
 border-radius：5px; } 
  

非它可以工作，我已经使用了这个加载，但它都说active-link应该工作？

任何人都可以告诉我我要去哪里吗？抱歉，如果它的简单CSS不是我最强的语言。

编辑：

感谢您的建议，

  .navigation a：active {
 background：＃29abe2; 
颜色：#fff; 
 border-radius：5px; } 
  

也不起作用。

解决方案

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

  .navigation a.active {
 background：＃29abe2; 
颜色：#fff; 
 border-radius：5px; 
} 
  

与：

  .navigation a：active {
 background：＃29abe2; 
 border-radius：5px; 
颜色：#fff; 
} 
  

---

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

 < div class =seven columns navigation id =navigation> 
< a href =＃class =active> Page1< / a> 
< a href =＃>第2页< / a> 
< a href =＃> Page3< / a> 
< a href =＃>第4页< / a> 
< a href =＃>第5页< / a> 
< / div> 
  

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

 < div class =七列导航id =navigation> 
< a href =＃<？php if（$ page == 1）echo'class =active'; ？>>第1页及LT; / A> 
< a href =＃<？php if（$ page == 2）echo'class =active'; ？>>第2页< / A> 
< a href =＃<？php if（$ page == 3）echo'class =active'; ？>>第3页和LT; / A> 
< a href =＃<？php if（$ page == 4）echo'class =active'; ？>>第4页及LT; / A> 
< a href =＃<？php if（$ page == 5）echo'class =active'; ？>>第5页和LT; / A> 
< / div> 
  

So I have a nav bar. Built using 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.

Here is the CSS i have tried so far.

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

EDIT:

Thanks for the suggestions, however

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

doesn't work either.

解决方案

I saw that there's an error here, as it should be :active and not .active, so replace:

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

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

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

这篇关于CSS活动链接不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！