Jquery跳转页面后的导航栏添加选中后样式

93 阅读 0 评论 62 点赞

我是靠谱客的博主要减肥枫叶，最近开发中收集的这篇文章主要介绍Jquery跳转页面后的导航栏添加选中后样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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"); 
      //$(this).parent('li').addClass("on").siblings().removeClass("on"); 直接父级
    } 
  }); 
}); 
</script> 
</body>
</html>

QQ交谈：tencent://message/?uin=772116804&site=qq&Menu=yes 改qq号