版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
##js做一个简易的选项卡
js联动太麻烦 一个简单的选项卡给宁看
首先是我的思路↓
思路
a)先让所有隐藏,再让当前显示出来
b)涉及到一组一堆 所有 操作用 for循环
c) 循环里面加事件,事件里面i值不能用
解决办法:在每一个元素身上添加一个i值
接下来是style部分↓
#box button.ac{
background: blue
}
#box div{
width: 300px;
height: 300px;
border: 1px solid red;
display: none; //将其他div隐藏
}
body部分↓
<div id="box">
<button class="ac">俺是1</button>
<button>俺是2</button>
<button>俺是3</button>
<div style="display: block">111</div>
<div>222</div>
<div>3333</div>
</div>
又是最重要的js部分了↓
//第一步:window.onload
window.onload=function(){
//第二步:获取dom节点
var $=item=>document.querySelectorAll(item)
var But=$("#box button")
var Div=$("#box div")
//操作dom节点
for(var i=0;i<But.length;i++){
But[i].index=i;//循环里面加事件,事件里面i值不能用,解决方法:在每一个元素身上添加一个i值
But[i].onclick=function(){
for(var i=0;i<But.length;i++){
But[i].className=''
Div[i].style.display="none"
}
this.className="ac"
Div[this.index].style.display="block"
}
}
}