织梦高亮显示当前导航条的javascript
首先写一下html结构:
| <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> |
