<style> .test{color:#900;font-size: 0;border-radius: 6px;} .test span{display: inline-block;font-size: 12px;text-align: center;cursor: pointer;padding: 5px;background-color: #E6E6E6;border: 1px solid #b3b3b3;margin-right: -1px;} .test span:first-child{border-radius: 4px 0 0 4px;} .test span:last-child{border-radius: 0 4px 4px 0;} .test .on{background-color: #cecece;border: 1px solid #900;position: relative;} </style> <div class="test"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> </div> <script> // siblings()用于初始化，在后续的点击事件中不应该使用siblings(), $(".test span").eq(0).addClass("on").siblings().removeClass("on"); var that=$(".test span").eq(0)[0]; $(".test span").click(function(event) { // $(this).addClass('on').siblings('span').removeClass('on'); if(typeof(that)!="undefined"){ $(that).removeClass("on"); } $(this).addClass('on'); that=this; }); </script>