H5页面两层tab切换嵌套
最近经朋友介绍接了个外包页面就一个简单的H5引流页面,布局就一个两层嵌套的tab切换。
效果如图:
直接上代码
css:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
html {
font-size: 100px;
}
body {
min-width: 300px;
max-width: 750px;
margin: 0 auto;
background: #fff;
font-family: Arial, 'PingFang SC', 'Microsoft YaHei', Tahoma, 'sans-serif';
}
.main {
width: 100%;
}
.btn {
width: 100%;
height: 1.2rem;
display: flex;
justify-content: space-between;
}
.spanList {
font-size: 0.36rem;
color: #3f3f3f;
text-align: center;
line-height: 1.2rem;
display: inline-block;
position: relative;
letter-spacing: 0.005rem;
font-weight: 400;
width: 33.333333%;
}
.active {
color: #3f3f3f;
text-align: center;
line-height: 1.2rem;
letter-spacing: 0.005rem;
display: inline-block;
background: #ccc;
font-weight: 700;
}
.context {
width: 100%;
float: left;
}
.con {
display: none;
width: 7.5rem;
}
ul {
width: 7.5rem;
height: 1.5rem;
background: #ccc;
display: flex;
flex-flow: wrap;
justify-content: space-between;
}
li {
text-align: center;
width: 1.8rem;
display: block;
list-style: none;
cursor: pointer;
height: 0.6rem;
line-height: 0.6rem;
background: pink;
font-size: 0.4rem;
text-align: center;
}
.choice {
background: #409EFF;
color: #fff;
}
.tab-item {
display: none;
font-size: 0.8rem;
}
.show {
display: block;
}
</style>
html:
<div class="main">
<div class="btn">
<!-- Tab标题 -->
<span class="active spanList">课程介绍</span>
<span class="spanList">用户故事</span>
<span class="spanList">常见问题</span>
</div>
<div class="context">
<!-- Tab内容 -->
<div class="con">
<ul class="clearfix">
<li tabid="1" class="choice">tab1</li>
<li tabid="2">tab2</li>
<li tabid="3">tab3</li>
<li tabid="4">tab4</li>
<li tabid="5">tab5</li>
<li tabid="6">tab6</li>
<li tabid="7">tab7</li>
</ul>
<div id="box">
<div class="tab-item show">课程介绍Tab-item1</div>
<div class="tab-item">课程介绍Tab-item2</div>
<div class="tab-item">课程介绍Tab-item3</div>
<div class="tab-item">课程介绍Tab-item4</div>
<div class="tab-item">课程介绍Tab-item5</div>
<div class="tab-item">课程介绍Tab-item6</div>
<div class="tab-item">课程介绍Tab-item7</div>
</div>
</div>
<div class="con">
<ul class="clearfix">
<li tabid="1" class="choice">tab1</li>
<li tabid="2">tab2</li>
<li tabid="3">tab3</li>
<li tabid="4">tab4</li>
<li tabid="5">tab5</li>
<li tabid="6">tab6</li>
<li tabid="7">tab7</li>
</ul>
<div id="box">
<div class="tab-item show">用户故事Tab-item1</div>
<div class="tab-item">用户故事Tab-item2</div>
<div class="tab-item">用户故事Tab-item3</div>
<div class="tab-item">用户故事Tab-item4</div>
<div class="tab-item">用户故事Tab-item5</div>
<div class="tab-item">用户故事Tab-item6</div>
<div class="tab-item">用户故事Tab-item7</div>
</div>
</div>
<div class="con">
<ul class="clearfix">
<li tabid="1" class="choice">tab1</li>
<li tabid="2">tab2</li>
<li tabid="3">tab3</li>
<li tabid="4">tab4</li>
<li tabid="5">tab5</li>
<li tabid="6">tab6</li>
<li tabid="7">tab7</li>
</ul>
<div id="box">
<div class="tab-item show">常见问题Tab-item1</div>
<div class="tab-item">常见问题Tab-item2</div>
<div class="tab-item">常见问题Tab-item3</div>
<div class="tab-item">常见问题Tab-item4</div>
<div class="tab-item">常见问题Tab-item5</div>
<div class="tab-item">常见问题Tab-item6</div>
<div class="tab-item">常见问题Tab-item7</div>
</div>
</div>
</div>
</div>
js:
// rem换算
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// tab 切换
$(".con").eq(0).show();
$(".btn span").click(function () {
var num = $(".btn span").index(this);
$(".con").hide();
$(".con").eq(num).show();
$(this).attr("class", "active spanList");
$(this).siblings().attr("class", "spanList");
})
$(".con li").click(function () {
// 修改tab标签样式
$(this).attr("class", "choice")
$(this).siblings().attr("class", "")
// 获取tab ID
var itemId = $(this).attr("tabid") - 1;
// 切换到指定tab
$(this).parents('.con').find("#box").find(".tab-item:eq(" + itemId + ")").addClass("show");
$(this).parents('.con').find("#box").find(".tab-item:eq(" + itemId + ")").siblings().removeClass("show");
});
番外篇:
最近在持续混吃等死的日子里,又双叒(ruò)叕(zhuó)间歇性踌躇满志发作了,就突发奇想决定把这么多年的做的一些东西整理出来发发CSDN,So如果对您有用希望点个赞,没营养(那是正常的就是个low鸡板砖工)请忽略,谢谢!~~!