<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../ajax/ajaxdemo/js/jquery-2.1.4.min.js" ></script> <style> li{width: 20px;height: 20px;margin: 0 20px;background: yellowgreen;list-style: none;padding: 0;float: left;text-align: center;color: white;} .active{background: yellow;} </style> </head> <body> <ul> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html> <script> // 定义一个原来的初始的。 var oldli=$('li')[0]; $('li').bind('click',function(){ // 请全部给当前添加 // $('li').removeClass('active'); // $(this).addClass('active'); // 清除上一个，给当前添加 $(oldli).removeClass('active'); oldli=this; $(this).addClass('active'); }) </script>