原生js实现tab点击切换事件
原本Vue中不涉及交互的页面让被抽离出来用原生实现，突然写原生，手抖的无从下手。。。
实现的效果是这样的（原本用的是模板字符串循环到页面上的，最后得知这个页面是固定没有更改的可能，所以就写死了，因为公司的项目，所以上传的自己做了小调整）
上代码：
HTML代码
<div class="level_box">
<div class="main">
<div class="level_list">
<div class="item">
<div class="img img1" onclick="changeTab(1,this)">
<img class='imgPic div_block' src="img/level/lv9.png" alt="">
<img class="imgPic default div_none" src="img/level/lv9_d.png" alt="">
</div>
<p id="p_text" class="high">哈哈哈哈</p>
<p>Lv.9解锁</p>
</div>
<div class="item">
<div class="img img2" onclick="changeTab(2,this)">
<img class='imgPic div_none' src="img/level/lv12.png" alt="">
<img class="imgPic default div_block" src="img/level/lv12_d.png" alt="">
</div>
<p id="p_text">哈哈哈哈</p>
<p>Lv.12解锁</p>
</div>
<div class="item">
<div class="img img3" onclick="changeTab(3,this)">
<img class='imgPic div_none' src="img/level/lv13.png" alt="">
<img class="imgPic default div_block" src="img/level/lv13_d.png" alt="">
</div>
<p id="p_text">哈哈哈哈</p>
<p>Lv.13解锁</p>
</div>
<div class="item">
<div class="img img4" onclick="changeTab(4,this)">
<img class='imgPic div_none' src="img/level/lv25.png" alt="">
<img class="imgPic default div_block" src="img/level/lv25_d.png" alt="">
</div>
<p id="p_text">哈哈哈哈</p>
<p>Lv.25解锁</p>
</div>
<div class="item">
<div class="img img5" onclick="changeTab(5,this)">
<img class='imgPic div_none' src="img/level/lv33.png" alt="">
<img class="imgPic default div_block" src="img/level/lv33_d.png" alt="">
</div>
<p id="p_text">哈哈哈哈</p>
<p>Lv.33解锁</p>
</div>
<div class="item">
<div class="img img6" onclick="changeTab(6,this)">
<img class='imgPic div_none' src="img/level/lv35.png" alt="">
<img class="imgPic default div_block" src="img/level/lv35_d.png" alt="">
</div>
<p id="p_text">哈哈哈哈</p>
<p>Lv.35解锁</p>
</div>
</div>
</div>
<div class='level_foot div_block'>
<div class="level_detail">
<img src="img/level/1.jpg" alt="">
</div>
<div class="level_tip">
<div class="item">
<div class="title">获取条件</div>
<div class="name">等级提升至<span>9</span>级获得</div>
</div>
</div>
</div>
<div class='level_foot div_none'>
<div class="level_detail">
<img src="img/level/2.jpg" alt="">
</div>
<div class="level_tip">
<div class="item">
<div class="title">获取条件</div>
<div class="name">等级提升至<span>12</span>级获得</div>
</div>
</div>
</div>
<div class='level_foot div_none'>
<div class="level_detail">
<img src="img/level/3.jpg" alt="">
</div>
<div class="level_tip">
<div class="item">
<div class="title">获取条件</div>
<div class="name">等级提升至<span>13</span>级获得</div>
</div>
</div>
</div>
<div class='level_foot div_none'>
<div class="level_detail">
<img src="img/level/4.jpg" alt="">
</div>
<div class="level_tip">
<div class="item">
<div class="title">获取条件</div>
<div class="name">等级提升至<span>20</span>级获得</div>
</div>
</div>
</div>
<div class='level_foot div_none'>
<div class="level_detail">
<img src="img/level/5.jpg" alt="">
</div>
<div class="level_tip">
<div class="item">
<div class="title">获取条件</div>
<div class="name">等级提升至<span>25</span>级获得</div>
</div>
</div>
</div>
<div class='level_foot div_none'>
<div class="level_detail">
<img src="img/level/6.jpg" alt="">
</div>
<div class="level_tip">
<div class="item">
<div class="title">获取条件</div>
<div class="name">等级提升至<span>33</span>级获得</div>
</div>
</div>
</div>
</div>
</div>
样式：CSS代码
* {
margin: 0;
padding: 0;
font-weight: normal;
line-height: 1.6;
}
.level_box {
width: 100vw;
min-height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.main .level_list {
height: 150px;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
}
.item .imgPic {
width: 41px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img {
margin-top: 10px;
width: 25vw;
height: 70px;
position: relative;
}
.level_list .item .default {
width: 30px;
}
.level_list .item>p {
width: 25vw;
text-align: center;
}
.level_list .item #p_text {
color: #666666;
font-size: 14px;
line-height: 1.8;
font-weight: bold;
}
.level_list .item>p:nth-child(3) {
color: #c2c2c2;
font-size: 12px;
}
.level_list .item>p.high {
color: #d8a251 !important;
font-size: 16px !important;
}
.level_detail>img {
width: 87%;
display: block;
margin: 0 auto;
}
.level_tip {
width: 87%;
margin: 0 auto;
margin-top: 25px;
margin-bottom: 30px;
}
.level_tip .title {
color: #212121;
line-height: 2.5;
font-size: 16px;
font-weight: bold;
}
.level_tip .name {
color: #666666;
font-size: 14px;
margin-bottom: 12px;
}
.level_tip .name>span {
color: #212121;
font-weight: bold;
padding: 0 1px;
}
.level_tip .item:nth-child(2) {
border-top: 1px solid #e5e5e5;
}
.div_block {
display: block;
}
.div_none {
display: none;
}
逻辑：js代码
function changeTab(index, that) {
// 获取所有的标签img
let imgList = document.getElementsByClassName('img')
for (let i = 0, len = imgList.length; i < len; i++) {
// 将所有的图片设置灰色
imgList[i].childNodes[1].style.display = "none"
imgList[i].childNodes[3].style.display = "block"
imgList[i].parentNode.childNodes[3].className = ''
}
// 将选中的那个设置高亮
imgList[index - 1].childNodes[1].style.display = "block"
imgList[index - 1].childNodes[3].style.display = "none"
that.parentNode.childNodes[3].className = 'high'
// 获取所有的内容标签
let levelList = document.getElementsByClassName('level_foot')
// 将所有的内容都隐藏
for (let j = 0, lenj = levelList.length; j < lenj; j++) {
levelList[j].style.display = "none"
}
// 显示选择对应的内容
levelList[index - 1].style.display = "block"
}
总结：js基础很重要，用框架是很放便，但是js基础一定得时不时德补补