<!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>