我希望当页面处于活动状态时菜单字体具有特定的颜色

时间:2013-01-22 00:07:13

标签: css

我试图让菜单中所选页面链接的字体颜色为#EE4D10颜色。它应该保持这种颜色,直到导航到另一页。然后应突出显示新页面的链接。

使用过的css代码:

ul.links {
    margin: 0;
}

ul.links li {
    list-style: none;
    padding: 8px 0;
}

ul.links li a, ul.links li a:hover {
    padding: 0 0 0 28px;
    background: transparent url(../images/page.png) no-repeat left center;
    color: #06C4E6;
    text-decoration: underline;
} 

ul.links li a:hover {
    color: #5D5D5D;
    text-decoration: none;
} 

#nav, #nav ul {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 35px;
    font: 115% helvetica;
}

#nav a {
    color: #2F80AF;
    display: block;
    text-decoration: none;
    list-style-type: none;
}

#nav li, #nav li.last {
    float: left;
    border-right: 1px solid #FFF;
    display: block;
    padding: 0;
    margin: 0;
    height: 35px;
}

#nav li.last {
    border-right: 0px;
}

#nav li a, #nav li.last a {
    padding: 9px 0;
    width: 175px;
    text-align: center;  
    height: 15px;
}

#nav li.last a {
    width: 176px;
}

#nav li ul {
    position: absolute;
    background: #e3eff7;
    font: 100% arial;
    width: 100%;
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}

#nav a:hover {
    color: #FFF;
}

#nav li:hover, #nav li.sfhover {
    background: #00AFD8;
}

#nav li li:hover {
    background: #00AFD8;
}

#nav li li {
    border-bottom: 1px solid #FFF;
    width: 100%;
    padding: 0;
    display: block;
    float: left;
    height: auto;
}

#nav li li a {
    padding: 10px 43px 10px 43px;
    width: auto;
    height: auto;
}

#nav li:hover, #nav li.hover {
    position: static;
}

使用Html(所有页面都相同):

<ul id="nav">
  <li class="selected"><a href="hypnose.php">Hypnose</a></li>
  <li><a href="toepassing.php">Toepassing</a></li>
  <li><a href="FAQ.php">Veelgestelde vragen</a></li>
  <li><a href="Afspraak.php">Start met veranderen!</a></li>
  <li class="last"><a href="contact.php">Contact</a></li>
</ul>

The website is here。 任何人都可以帮我这个吗?

1 个答案:

答案 0 :(得分:0)

我看到你已经将selected css类应用于你的第一个li元素,所以你现在只需要利用它,例如这样:

#nav li.selected a
{
    color: #EE4D10;
}

编辑:

当然,您需要一段代码来确保将selected类应用于正确的li元素。与此同时,我自己做了一些研究,但还没有工作。它可以直接在php脚本中完成,这是实现这一目标的最佳方式。或者,如果由于某种原因你无法编辑脚本,你可以添加一些javascript而不是“在运行时”将其破解。