列表切换可以给用户更好的用户体验,解决因内容区域太多而导致的浏览麻烦,列表切换可以节省文章的篇幅,用户可以凭自己的喜好去选择哪一种浏览方式
语言及要点
- 应用js的jQuery框架
- 通过children() 获取ul的子元素
- removeClass() , addClass()
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MakStudio列表切换</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-2.1.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="box">
<div class="list-box">
<ul>
<li class="list-1" style="background-position:0px 0px"></li>
<li class="list-2" style="background-position:-32px -32px"></li>
</ul>
</div>
</div>
<div>
<ul class="content-box">
<li class="content-1">
<div class="content-detail">
<img src="logo.png" style="width:240px">
<span>文字列表</span>
</div>
</li>
<li class="content-1">
<div class="content-detail">
<img src="logo.png" style="width:240px">
<span>文字列表</span>
</div>
</li>
<li class="content-1">
<div class="content-detail">
<img src="logo.png" style="width:240px">
<span>文字列表</span>
</div>
</li>
</ul>
</div>
</body>
</html>
CSS代码
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.box{
width:800px;
margin: 30px auto 0 auto;
}
.list-box{
width: 800px;
height:35px;
border-bottom:1px solid #eee;
}
.list-box ul{
float: right;
}
.list-box ul li{
width: 32px;
height:32px;
list-style-type: none;
background-image: url(btn.png);
float: left;
background-repeat: no-repeat;
cursor: pointer;
}
.content-box{
width:800px;
margin:20px auto;
}
.content-2{
width: 240px;
height:240px;
border:1px solid #333;
float: left;
margin-left:20px;
list-style-type: none;
margin-bottom: 20px;
}
.content-1{
height:203px;
margin-bottom:20px;
}
JS代码
$(document).ready(function(){
$(".list-1").bind("click",function(){
$(".list-1").css("background-position","0px 0px");
$(".list-2").css("background-position","-32px -32px");
$(".content-box").children().removeClass("content-2").addClass("content-1");
})
$(".list-2").bind("click",function(){
$(".list-1").css("background-position","0px -32px");
$(".list-2").css("background-position","-32px 0px");
$(".content-box").children().removeClass("content-1").addClass("content-2");
})
})
Github链接
https://github.com/Beckyisme/changeList.git
查看更多内容,请关注微信公众平台MakStudio