多选 

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

 

posted @ 2016-06-01 15:47  Cutelady  阅读(238)  评论(0)    收藏  举报