Highlight the javascript of the current navigation bar, and highlight the javascript
First, write the html structure:
<Div id = "nav"> <ul> <li> <a href = "#1"> homepage </a> </li> <a href =" #2 "> product </a> </li> <a href =" #3 "> address </a> </li> <a href = "#4"> about </a> </li> <a href = "#5"> contact </a> </li> </ul> </div>
Then, write a simple style:
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 ;}
Finally, how can we highlight the current navigation? The js statement is as follows;
<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>