<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<style>
.nav { margin:20px auto; height:30px;}
li.active {background:#ff4c76;}
li { list-style:none; margin-right:20px; float:left;}
li a { text-decoration:none; color:#555;}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
/*$("ul li").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});*/
$(".nav").on('click','ul li',function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
<body>
<div class="nav">
<!-- <ul><li class="active"><a href="#">首页</a></li><li><a href="#">产品中心</a></li><li><a href="#">联系我们</a></li><li><a href="#">投放管理</a></li><li><a href="#">客户中心</a></li></ul> -->
</div>
</body>
</html>
<script>
$(function(){
$(".nav").html('<ul><li class="active"><a href="#">首页</a></li><li><a href="#">产品中心</a></li><li><a href="#">联系我们</a></li><li><a href="#">投放管理</a></li><li><a href="#">客户中心</a></li></ul>');
});
</script>
<!--方法二-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现导航菜单</title>
<style>
body,div,ul,li,a { font-size:14px; color:#555; margin:0;padding:0;}
.nav { margin:50px 50px; width:100%;height:30px;}
li { list-style:none; float:left; margin-right:20px;}
li a { text-decoration:none;}
li.active { background:red;}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").click(function(){
/*$(".active").removeClass("active");
$(this).addClass("active");*/
$(".active").removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">投放管理</a></li>
<li><a href="#">开心乐园</a></li>
<li><a href="#">客户中心</a></li>
</ul>
</div>
</body>
</html>
