Index.html
<! DOCTYPE html>"Utf-8"/> <title> navigation bar </title> <link rel="stylesheet"href="Css/test.css"/> <script type="Text/javascript"Src="Js/jquery-1.11.3.min.js"></script> <script type="Text/javascript"Src="Js/test.js"></script> class="nav"> <ulclass="List"> <li><a href="index.html"> Home </a></li> <li><a href="html.html">HTML</a></li> <li><a href="css.html">CSS</a></li> <li><a href="js.html">JS</a></li> <li><a href="jquery.html">JQUERY</a></li> </ul> </div> Css.html
<! DOCTYPE html>
Html.html
<! DOCTYPE html>
Jquery.html
<! DOCTYPE html>
Js.html
<! DOCTYPE html>
Test.js
$ (document). Ready (function () {//Get the index of the address bar split: Convert to array window.location.href: specific address bar var index= Window.location.href.split ("/"). length-1;//gets the first few of the address bar for example Index,css,jqueryvar href=window.location.href.split ( "/") [Index].substr (0,4), if (href.length>0) {$ (". List li a[href^= '" +href+ "']"). AddClass ("on")}else{$ (". List Li a[ href^= ' index '). addclass ("On")}});
Test.css
* {margin:0;padding:0;} Ul,li {list-style:none;} A{text-decoration:none;}. Nav {width:100%;height:40px;background-color: #222; margin-top:100px;}. list {width:1000px;height:40px;margin:0 auto;}. List li {float:left;}. List li a {color: #aaa;p adding:0 30px;line-height:40px;display:block;}. List Li a:hover{background: #333; color: #fff;}. List Li A.on {background: #333; color: #fff;} h1{text-align:center;padding:100px 0;}
Effect:
2017-09-23 11:09:20
Use JQuery to implement the banner navigation bar highlighted by the current page