Jquery跳轉頁面後的導航欄新增選中後樣式
阿新 • • 發佈：2019-02-05
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Jquery跳轉後頁面的導航欄新增選中後樣式的例項</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style> *{margin: 0;padding: 0;} a{ text-decoration: none; } .nav{ width: 100%; height: 50px; background: gray; } .nav ul li{ float: left; padding:0 5px; list-style: none; } .nav ul li a{ width: 100px; line-height: 50px; text-align:center; display: block; color:black; } .nav .on{ color: #fff; background: red; } </style> </head> <body> <div class="nav"> <ul> <li><a href="1.html"> 首頁</a></li> <li><a href="2.html"> 個人資料</a></li> <li><a href="3.html"> 我的好友</a></li> <li><a href="4.html"> 訊息管理</a></li> </ul> </div> <script type="text/javascript"> $(document).ready(function(){ $(".nav li a").each(function(){ if($(this)[0].href==String(window.location)){ $(this).addClass("on").siblings().removeClass("on"); } }); }); </script> </body> </html>