Highlight the javascript of the current navigation bar, and highlight the javascript

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>