选项卡代码在很多地方都用应用,笔者此前不会的时候面对选项卡需求,又不想花钱,都是建立多个单独的文件,然后内容不同。
最近研究了一下,也算是应用了吧,这里做个记录,方便以后使用。
先说代码架构,选项卡代码由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)
|