<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.contents{
width: 150px;
height: 300px;
border: 1px solid lightblue;
}
.content{
width: 100%;
height: 100%;
display: none;
}
.content.active{
display: block;
}
.content img{
width: 100%;
}
.tabbar{
border: 1px solid lightblue;
width: 150px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tabbar .tab>div{
width: 32px;
height: 32px;
}
.tabbar .tab .home{
background-image: url(./img/home.png);
}
.tabbar .tab .class{
background-image: url(./img/class.png);
}
.tabbar .tab .mine{
background-image: url(./img/mine.png);
}
.tabbar .tab.active .home{
background-image: url(./img/homed.png);
}
.tabbar .tab.active .class{
background-image: url(./img/classed.png);
}
.tabbar .tab.active .mine{
background-image: url(./img/mined.png);
}
.tabbar .tab.active p{
color: yellow;
}
</style>
<script src="./js/jquery.js"></script>
</head>
<body>
<div class="contents">
<div class="content ">
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/d80fd7d6aac070c6ff03ab8fe84fd6db.jpeg?x-bce-process=image/crop,x_0,y_0,w_2227,h_1212" alt="">
<br>
首页
</div>
<div class="content ">分类</div>
<div class="content active">我的</div>
</div>
<div class="tabbar ">
<div class="tab " data-target="home">
<div class="home"></div>
<p>首页</p>
</div>
<div class="tab " data-target="class">
<div class="class"></div>
<p>分类</p>
</div>
<div class="tab active" data-target="mine">
<div class="mine"></div>
<p>我的</p>
</div>
</div>
<script>
$(".tab").click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
var that=this;
var index=-1;
$(".tab").each(function(i,item){
if(that == item){
index=i;
}
})
$(".content").eq(index).addClass("active");
$(".content").eq(index).siblings().removeClass("active");
})
</script>
</body>
</html>
扫一扫
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
