您的位置：首页 > Web前端 > CSS

列表样式切换

2015-09-05 09:34 811 查看
列表样式的切换





<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航