2010-08-20 90 views
0

简单地说,我想实现一些我们在堆栈溢出顶部导航器中的活动按钮的颜色是不同的,但只使用CSS NOT JavaScript?链接按钮更改为CSS?

但是a:active似乎没有按预期工作。 我看到一些很常见的例子,这是通过将类分配给来自服务器或客户端的标记中的活动元素来完成的。这可能只使用CSS?

<HTML> 
    <HEAD> 
     <TITLE>Its Nav</TITLE> 
     <STYLE type="text/css"> 
      div { 
       width:200; 
      } 
      ul { 
       list-style:none; 
      } 
      ul li a { 
       padding:2 4 2 4; 
       border:1px solid blue; 
       display:block; 
       text-decoration:none; 
      } 
      ul li a:active { 
       color:green; 
      } 
      ul li a:hover { 
       color:red; 
      }   
      ul li a:link { 
       color:gray; 
      } 
     </STYLE> 
    </HEAD> 
    <BODY> 
    <div> 
     <ul> 
      <li><a href="#" >link one</a></li> 
      <li><a href="#" >link two</a></li> 
      <li><a href="#" >link three</a></li> 
      <li><a href="#" >link four</a></li> 
      <li><a href="#" >link five</a></li> 
      <li><a href="#" >link six</a></li> 
      <li><a href="#" >link seven</a></li> 
      <li><a href="#" >link eight</a></li> 
      <li><a href="#" >link nine</a></li> 
      <li><a href="#" >link ten</a></li> 
     </ul> 
    <div> 
    </BODY> 
</HTML> 
+2

发布您的代码? – 2010-08-20 08:53:44

+0

无需为此使用JavaScript。可能是另一个属性重叠,或者你的CSS有问题。所以,正如迈克尔罗宾逊所说,最好的办法是在这里发布一些代码,或者更好地作为jsbin.com – Sotiris 2010-08-20 10:42:45

+0

上的一个实例。如果你想正确使用CSS,你应该包括一个文档类型,就像这样:'<!DOCTYPE HTML>'。 – 2011-04-06 16:26:39

回答

0

如果我明白你想要做什么,使用a:active将无济于事。 css伪类激活显示链接被点击的时间(恰好当它被点击并且在下一页加载之前)。之后,它改变访问。

编辑:我没有看到你首先想要一个专门的CSS解决方案。我相信你所需要的是以前已经回答的问题。请检查How to set a active link as default when page first time load,看看它是否有帮助:)

既然您不想使用JavaScript解决方案,我建议您在导航栏中为活动<li>标记创建一个新类。您可以动态地(例如使用php)或手动为html中的每个页面执行此操作。

正如其他人已经评论过的,如果您发布了代码,那么给您一个可以直接应用的答案会更容易。