jquery实现手机端tab切换
####废话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.TasksBox{
width: 100%;
height: 47px;
border-bottom: 1px solid #E8E8E8;
display: flex;
flex-direction: row;
justify-content: space-around ;
align-items: center;
}
.Tasks{
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
font-size:16px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(153,153,153,1);
}
.TasksActive{
height: 100%;
font-size:16px;
color:rgba(30,40,61,1);
font-family:PingFangSC-Regular;
font-weight:400;
border-bottom: 3px solid rgba(251,62,82,1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.tabContent{
width: 100%;
height: auto;
}
.MarketingBox{
width: 100%;
height: auto;
display: none;
}
.MarketingActive{
display: block;
}
</style>
</head>
<body>
<div id="main">
<div class="TasksBox">
<div class="Tasks TasksActive"> 营销任务</div>
<div class="Tasks">我的任务</div>
</div>
<div class="tabContent">
<div class="MarketingBox MarketingActive">
1111
</div>
<div class="MarketingBox">
222
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
$(".TasksBox .Tasks").off("click").on("click",function(){
var index = $(this).index();
$(this).addClass("TasksActive").siblings().removeClass("TasksActive");
$(".tabContent .MarketingBox").eq(index).addClass("MarketingActive").siblings().removeClass("MarketingActive");
});
});
</script>