js 原生选项卡
css代码：
[precode]
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
flex-direction: column;
width: 400px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
padding: 1px;
}
/* dianan */
.banner {
display: flex;
width: 100%;
height: 30px;
border: 1px solid red;
}
.site {
flex-grow: 1;
width: 20px;
height: 30px;
border: 1px solid red;
}
.siteColor {
background-color: brown;
}
.main {
width: 100%;
height: 270px;
/* flex-wrap: 1; */
position: absolute;
}
.main:nth-child(1) {
background-color: aqua;
}
.main:nth-child(2) {
background-color: rgb(19, 44, 44);
}
.main:nth-child(3) {
background-color: rgb(177, 233, 22);
}
.main:nth-child(4) {
background-color: rgb(63, 26, 212);
}
.zhuTi {
position: relative;
}
</style>
[/precode]
html代码:
[precode]
<div class="box">
<!-- tou -->
<div class="banner">
<div class="site"></div>
<div class="site"></div>
<div class="site"></div>
<div class="site"></div>
</div>
<!-- zhong -->
<div class="zhuTi">
<div class="main" style="display: block;"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
</div>
</div>
[/precode]
js代码：
[precode]
<script>
//获取元素
var site = document.querySelectorAll('.site')
var main = document.querySelectorAll('.main')
//遍历每一个点击按钮
site.forEach(function (item, index) {
//为每一个按钮设置点击触发事件
item.onclick = function () {
//排它，每次清除一下item01中没有点击的就remove掉
site.forEach(function (item01) {
item01.classList.remove('siteColor')
})
//点击添加颜色
item.classList.add('siteColor')
//遍历盒子中每一个元素得到索引
main.forEach(function (item02, index02) {
//先全部设置为none不可见，
item02.style.display='none'
//如果索引相等，则block显示
if (index == index02) {
item02.style.display='block'
}
})
}
})
//ok
</script>
[/precode]
共有 0 条评论