分享下我自己用jquery（也可以换成js原生，只是写法有些许区别）手写的tab选项卡功能的demo
主要思想就是给每个按钮及每个tab都加上一个下标用于使其一一对应，如：
按钮[i] --> tab[j] （只有 i 等于 j 的时候按钮对应的tab才会显示出来）
html：
<button class="changebtn">tab1</button>
<button class="changebtn">tab2</button>
<button class="changebtn">tab3</button>
<div class="tab tab1">这是第一个tab</div>
<div class="tab">这是第二个tab</div>
<div class="tab tab3">这是第三个tab</div>
js：
var btns = $(".changebtn");
var tabs = $(".tab");
console.log(btns.length)
for(var i = 0;i < btns.length; i++){
var btn = btns[i];
btn.index = i;
console.log(btn.index);
for(var k = 0;k<tabs.length;k++){
tabs[k].style.display = 'none';
}
btn.onclick = function () {
for(var j = 0; j < tabs.length; j++){
var oo = tabs[j];
tabs.currentIndex = j;
}
tabs.css('display','none');
tabs[this.index].style.display = 'block';
}
}
css：(随便写的，方便区分tab块)
.changebtn{
width: 60px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #01AAED;
color: #fff;
border: none;
}
.tab{
margin-top: 20px;
width: 160px;
line-height: 60px;
text-align: center;
background-color: red;
}
.tab1{
background-color: yellow;
}
.tab3{
background-color: green;
}
效果图：
