Discuz!教程：选项卡代码怎么制作。

选项卡代码在很多地方都用应用，笔者此前不会的时候面对选项卡需求，又不想花钱，都是建立多个单独的文件，然后内容不同。

最近研究了一下，也算是应用了吧，这里做个记录，方便以后使用。

先说代码架构，选项卡代码由html、CSS、JS部分组成。

[HTML] 纯文本查看 复制代码

     <div class="nav1">
     <div class="active">标题1</div>
     <div class="">标题2</div>
     <div class="">标题3</div>
     <div class="">标题4</div>
     </div>
     <div class="list">
     <div><ul class="cl">内容1</ul></div>
     <div><ul class="cl">内容2</ul></div>
     <div><ul class="cl">内容3</ul></div>
     <div><ul class="cl">内容4</ul></div>
     </div>

[CSS] 纯文本查看 复制代码

.taglist{padding: 10px 15px;
    line-height: 13px;
    font-size: 13px;
    background: #fff;
    margin: 0 0 20px 0;
    min-height: 341px;
   }
.taglist li {height:114px;}  

   
.nav1{
width: 100%;
height: 35px;
display: flex;
background-color: #fff;

}
.nav1 div{
width: 31px;
    height: 42px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    margin: -8px 6px 0 22px;
    padding: 0 0 2px 0;
}
.list{
width: 98%;
margin-left: 2%;
padding: 10px 0 0 0;
}
.list div{
width: 100%;
height: 100%;
} 


.list span a{
    
    padding: 10px 0;
   
    
    background: #FFFFFF;
    
    margin: -9px 0 0 9px;
    width: 30px;
}
    

.list div h2 {    position: relative;
    color: #449bf4;
    font-weight: 400;
    font-size: 18px;
    padding-bottom: 20px;
    margin: 12px 0;
    border-bottom: 0;
    width: 300px;
}

.list div h21 {    position: relative;
    color: #449bf4;
    font-weight: 400;
    font-size: 18px;
    padding-bottom: 20px;
    margin: 12px 0;
    border-bottom: 0;
    width: 300px;
}

.active{

color: #333;
font-size: 14px;
border-bottom: 2.5px solid #59d192;
}

[JavaScript] 纯文本查看 复制代码

let nav = document.getElementsByClassName('nav1')[0];
let but = nav.getElementsByTagName('div');
 
let list = document.getElementsByClassName('list')[0];
let item = list.getElementsByTagName('div');
 
// 隐藏多余选项列表
for(let i = 1; i < item.length; i++){
item[i].style.display = "none";
}
 
// 循环按钮绑定事件
for(let k = 0; k < but.length; k++){
but[k].onclick = function(){
 
for(let j = 0; j < but.length; j++){
but[j].className = "";
item[j].style.display = "none";
}
but[k].className = "active";
item[k].style.display = "block";
}
}
console.log(item)