下午好,当用户单击链接时,我很难将导航链接设置为活动状态。我有一个 header.php 文件,其中包含导航和 lavalamp id。header.php 包含在每个页面中。当我单击“关于”页面链接时,该行仍保留在“主页”链接上的默认位置。如果有帮助,我将在 php 中运行它。
感谢您的帮助...谢谢。
header.php 包含以下 html:
<div id="nav" class="grid_9 push_3">
<ul class="lavaLamp" id="lavaLampLine">
<li><a href="index.php">HOME</a></li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="product.php">SUPPORT</a></li>
<li><a href="blog">OUR BLOG</a></li>
<li><a href="contact.php">CONTACT US</a></li>
</ul><!-- end menu -->
</div><!-- end nav -->
的CSS:
/* 整个 LavaLamp 菜单的样式 */
.lavaLamp {
position: relative;
height:15px;
width:421px;
margin:3px 0;
padding:80px 0 0 0;
/* overflow: hidden; */
}
/* Force the list to flow horizontally */
.lavaLamp li {
float:left;
list-style:none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
border-bottom:4px solid #3A7CB8;
width:9px;
height:15px;
top:90px;
position:absolute;
z-index:8;
}
.lavaLamp li.back .left {
border-bottom:4px solid #3A7CB8;
height:15px;
overflow:hidden;
margin-right: 5px; /* 5px is the width of the rounded shape */
}
/* Styles for each menu-item. */
.lavaLamp li a {
font-size:16px;
font-weight:normal;
text-decoration:none;
display:inline;
color:#095BA6;
text-align:center;
margin: auto 12px;
display: block;
float: left;
cursor:pointer;
outline: none;
z-index:10;
height:30px;
position:relative;
}
.lavaLamp li a:hover, .lavaLamp li a:active, .lavaLamp li a:visited {
border: none;
}
.active {
border: none;
color:#000000;
font-weight:bold;
}