<!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>
Jquery跳转后页面的导航栏添加选中后样式的实例
猜你喜欢
转载自blog.csdn.net/a772116804/article/details/80356046
今日推荐
周排行