首先寫一下html結(jié)構(gòu):
|
<div id="nav">
<ul>
<li><a href="#1">首頁</a></li>
<li><a href="#2">產(chǎn)品</a></li>
<li><a href="#3">地址</a></li>
<li><a href="#4">關(guān)于</a></li>
<li><a href="#5">聯(lián)系</a></li>
</ul>
</div>
|
然后簡單的 寫一下樣式：
|
body{font-family: "微軟雅黑";}
.active{
background: -webkit-linear-gradient(top,red,yellow);
}
ul{float: left;width: 500px;height: 30px;background: red;line-height: 30px;}
li{list-style: none;float: left;}
a{text-align: center;line-height: 30px;display: block;color: #fff;width: 70px;text-decoration: none;}
a:hover{background: green;}
|
最后怎樣才能高亮顯示當(dāng)前導(dǎo)航呢，js語句如下；
|
<script type="text/javascript">
var myNav=document.getElementById("nav").getElementsByTagName("a");
var currenturl = document.location.href;
for(var i=0;i<myNav.length;i++){
var aurl=myNav[i].getAttribute("href");
if(currenturl.indexOf(aurl)!=-1){
myNav[i].className="active";
myNav[0].className="";
}
}
</script>
|
