<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="" /> <meta name="description" content="" /> <title></title> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.js" type="text/javascript"></script> <script> $(document).ready(function(){ var checkList = $(".checkList"); checkList.find("li").on('click',function(e){ e = e || window.event; $(this).toggleClass('Checkcur'); e.preventDefault(); }); }); </script> <style> * { margin:0; padding:0 } ol, ul { list-style:none } a { text-decoration:none } .checkList { margin:10px 0 15px } .checkList li { width:80px; float:left; margin-right:10px; _outline:0 } .checkList li.Checkcur { transition:all .3s ease-in-out 0 } .checkList li a { display:block; width:78px; text-align:center; border:1px solid #ccc; color:#666; background:url(../images/select.gif) no-repeat right 28px; transition:all .2s ease-in-out 0; _outline:0 } .checkList li a:hover, .checkList li.Checkcur a { border:1px solid #feab58; color:#ff7f00; text-decoration:none; _outline:0 } .checkList li.Checkcur a { background:url(../images/select.gif) no-repeat right 17px; transition:all .2s ease-in-out 0 } .checkList { padding-left:20px } .checkList li a { height:28px; line-height:28px } </style> </head> <body> <!--右侧 --> <ul class="checkList"> <li class="Checkcur"><a href="javascript:;">第一个</a></li> <li><a href="javascript:;">第二个</a></li> <li><a href="javascript:;">第三个</a></li> </ul> <!--右侧 --> </body> </html>