一直都在用导航栏菜单选项的切换，使用js,jquery实现过相应的代码。下面展示一下用js实现切换：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> #container{width: 1100px;margin: 0 auto;} header{display:block;width: 100%;height: 90px;position: relative;} #logo{margin-top: 30px;float: left;} nav{display: block;float: right;margin-top: 37px;} nav ul li{list-style: none;float: left;margin-left: 45px;} nav ul li a{text-decoration: none;color: #5e5d5d;font-size: 14px;} .selected,header ul li a:hover{color: #ff4242;} </style> </head> <body> <!--the header Section --> <header > <div id="container"> <!--Logo--> <a href="#" id="logo"> </a> <!--Navigation Menu --> <nav> <ul> <li><a href="#" class="selected">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Team</a></li> <li><a href="#">Journal</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </header> <script src="../js/jquery.js"></script> <script type="text/javascript"> $("nav ul li a").click(function() { if(!$(this).hasClass('selected')){ $(this).addClass('selected'); } $(this).parent('li').siblings('li').find('a').removeClass('selected'); }); </script> </body> </html>
将其中jquery的路径换为本地的JQuery文件路径即可，效果如下：
