本站资源均来自互联网,仅供学习与参考,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
Copyright @ 2015-2020 织梦园 版权所有
Power by DedeCms
鲁ICP备15039853号-1
鲁公网安备 37132302000249号
模板标签 TAG标签 网站地图 XML地图 今日更新 返回顶部
<div id="nav"> <ul> <li><a href="#1">首页</a></li> <li><a href="#2">产品</a></li> <li><a href="#3">地址</a></li> <li><a href="#4">关于</a></li> <li><a href="#5">联系</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;} |
***后怎样才能高亮显示当前导航呢,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> |