列表样式的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表样式切换</title>
<style>
*{
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box{
width: 789px;
height: auto;
margin: 0 auto;
}
.list-box{
margin: 0 auto 10px;
width: 700px;
height: 42px;
border-bottom: 1px solid #eee;
}
.list{
float: right;
padding-top: 10px;
}
.list-box ul li{
cursor: pointer;/*变手*/
width: 30px;
height: 26px;
float: left;
display: block;
background: url("img/listype-icon.png") no-repeat;
}
.changelist .list-1-o{
height: 360px;
width: 240px;
border: 1px solid #aaaaaa;
float: left;
margin-left: 20px;
margin-bottom: 20px;
}
.changelist .list-2-v{
height: 360px;
}
</style>
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.js"></script>
<script>
$(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");
})
});
</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="changelist">
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
<li class="list-1-o">
<div class="lesson-info">
<img src="http://cnm0.book17.com/p6/girl13.com-2014-08-21-17-10-18_58.jpg" style="width: 240px">
<span>美女呀</span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
时间： 2024-10-24 17:30:05