如何使用CSS更改当前页面的链接颜色 [英] How to change the link color of the current page with CSS

问题描述

如何显示当前页面与其他页面不同的链接？我想换换文字和背景的颜色。

How do I display the link for the current page different from the others? I would like to swap the colors of the text and background.

这是我目前有的：

HTML：

  <div id="header"> 
    <ul id="navigation">
    <li class="bio"><a href="http://www.jacurren.com/">Home</a></li>
    <li class="theatre"><a href="http://www.jacurren.com/theatre.php">Theatre</a></li>
    <li class="prog"><a href="http://www.jacurren.com/programming.php">Programming</a></li>
    <li class="resume"><a href="http://www.jacurren.com/resume.php">R&eacute;sum&eacute;</a></li>
    <li class="portf"><a href="http://www.jacurren.com/portfolio.php">Portfolio</a></li>
    <li class="contact"><a href="http://www.jacurren.com/contact.php">Contact</a></li>   
    </ul>
  </div>

CSS：

#navigation{
    margin:0;
    padding:0;
    background:#000000;
    height:34px;
    list-style:none;
    position: relative;
    top: 80px;
}
#navigation li{
    float:left;
    clear:none;
    list-style:none;
}
#navigation li a{
    color:#A60500;
    display:block;
    font-size:12px;
    text-decoration:none;
    font-weight:bold;
    padding:10px 18px;
}
#navigation li a:hover{
    color:#640200;
    background-color:#000000;
}

推荐答案

a：active ：当您点击链接并按住它（ active！）。

a：visited ：当链接已被访问时。

a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.

如果您希望突出显示当前页面对应的链接，可以为链接定义一些特定样式 -

If you want the link corresponding to current page to be highlighted, you can define some specific style to the link -

.currentLink {
   color: #640200;
   background-color: #000000;
}

将此新类仅添加到相应的 / code>（链接），在服务器端或客户端（使用javascript）。

Add this new class only to the corresponding li (link), either on server-side or on client-side (using javascript).

这篇关于如何使用CSS更改当前页面的链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！