<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.box{
789px;
height: auto;
margin: 0 auto;
}
.list-box{
margin: 0 auto;
700px;
height: 42px;
border-bottom: 1px solid #eeeeee;
}
.list{
float: right;
padding-top: 10px;
}
.list-box ul li{
cursor: pointer;
30px;
height: 26px;
float: left;
display: block;
background: url("img/listype-icon.png") no-repeat;
}
.changelist .list-1-o{
height: 240px;
240px;
border: 1px solid #aaaaaa;
float: left;
margin-left: 20px;
margin-bottom: 20px;
}
.list-2-v .listimg,.list-2-v .listtext{
float: left;
}
.list-2-v .listimg img{
display: block;
}
.changelist .list-2-v{
height: 170px;
}
</style>
<body>
<div class="box">
<div class="list-box">
<ul class="list">
<li class="list-1" id="list-1" style="background-position: 0px -26px"></li>
<li class="list-2" id="list-2" style="background-position: -30px -26px"></li>
</ul>
</div>
<div>
<ul class="changelist">
<li class="list-1-o">
<div class="lesson-info">
<div class="listimg">
<img src="img/2.jpg" style=" 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style=" 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style=" 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style=" 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style=" 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style=" 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*$(document).ready(function(){
$(".list-1").bind("click",function(){
$(".list-1").css("backgroundPosition","0px -26px");
$(".list-2").css("backgroundPosition","-30px -26px");
$(".changelist").children().removeClass("list-2-v").addClass("list-1-o");
})
$(".list-2").bind("click",function(){
$(".list-1").css("backgroundPosition","0px 0px");
$(".list-2").css("backgroundPosition","-30px 0px")
$(".changelist").children().removeClass("list-1-o").addClass("list-2-v");
})
});*/
;(function($){
$.fn.lists=function(options){
var defaults={
};
$.extend(defaults,options);
return this.each(function(){
var $this=$(this);
$(".list-1").bind("click",function(){
$(".list-1").css("backgroundPosition","0px -26px");
$(".list-2").css("backgroundPosition","-30px -26px");
$this.children().removeClass("list-2-v").addClass("list-1-o");
})
$(".list-2").bind("click",function(){
$(".list-1").css("backgroundPosition","0px 0px");
$(".list-2").css("backgroundPosition","-30px 0px")
$this.children().removeClass("list-1-o").addClass("list-2-v");
})
});
}
})(jQuery);
$(function(){
$('.changelist').lists();
});
</script>
</html>
