<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表切换</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="ListStyle/jquery-2.1.1.min.js" type="text/jscript"></script>
<script src="app.js"></script>
</head>
<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="changlist">
<div class="lesson-info">
<li class="list-1-o">
<img src="ListStyle/lesson.png" width="185" alt="">
<span>环境搭建</span>
</li>
<li class="list-1-o">
<img src="ListStyle/lesson.png" width="185" alt="">
<span>环境搭建</span>
</li>
<li class="list-1-o">
<img src="ListStyle/lesson.png" width="185" alt="">
<span>环境搭建</span>
</li>
<li class="list-1-o">
<img src="ListStyle/lesson.png" width="185" alt="">
<span>环境搭建</span>
</li>
<li class="list-1-o">
<img src="ListStyle/lesson.png" width="185" alt="">
<span>环境搭建</span>
</li>
<li class="list-1-o">
<img src="ListStyle/lesson.png" width="185" alt="">
<span>环境搭建</span>
</li>
</div>
</ul>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;}
.box{
width:789px;
height:auto;
margin:0 auto;
}
.list-box{
margin:0 auto;
width:700px;
height:42px;
border-bottom:1px solid #eeeeee;
}
.list{
float:right;
padding-top:10px;
}
.list-box ul li{
cursor: pointer;/**改变鼠标形态*/
width:30px;
height:26px;
float:left;
display:block;
background:url(listype-icon.png) no-repeat;
}
.changlist .list-1-o{
list-style:none;
width:185px;
height:185px;
border:1px solid #aaa;
float:left;
margin-left:20px;
margin-bottom:20px;
}
.changlist .list-1-v{
height:69px;
}
// JavaScript Document
$(document).ready(function() {
$(".list-1").bind("click",function(){
$(".list-1").css("backgroundPosition","0px -26px");
$(".list-2").css("backgroundPosition","-30px -26px");
$(".changlist").children().removeClass("list-1-o").addClass("list-2-v");
});
$(".list-2").bind("click",function(){
$(".list-1").css("backgroundPosition","0px 0px");
$(".list-2").css("backgroundPosition","-30px 0px");
$(".changlist").children().removeClass("list-2-v").addClass("list-1-o");
});
});