我试图让菜单中所选页面链接的字体颜色为#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。 任何人都可以帮我这个吗?
答案 0 :(得分:0)
我看到你已经将selected
css类应用于你的第一个li
元素,所以你现在只需要利用它,例如这样:
#nav li.selected a
{
color: #EE4D10;
}
编辑:
当然,您需要一段代码来确保将selected
类应用于正确的li
元素。与此同时,我自己做了一些研究,但还没有工作。它可以直接在php脚本中完成,这是实现这一目标的最佳方式。或者,如果由于某种原因你无法编辑脚本,你可以添加一些javascript而不是“在运行时”将其破解。