js实现简单的选项卡效果

效果如下：

代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style div { width :200 px；高度：100 pxborder:1px红色固体；显示：无}；/style脚本窗口。onload=function(){ var Odiv=document。getelementsbytagname(' div ')var oIput=document。getelementsbytagname(' input ')OdiV[0]。风格。display=' blockvar ten=oIput[0]为(I=0；ioi put . lentigi){ oi put[I].缩进=i //通过自定义属性获得下标值放[我]进去.onclick=function(){ ten。风格。背景=' Odiv[ten。缩进]。风格。display=' none '//点击时把上一个隐藏this.style.background='黄色奥迪夫[这个。缩进]。风格。display=' block ' ten=this } }/script/head dyinput type=' button ' value='按钮一style=' background :黄色'/input type=' button ' value='按钮二/input type='button' value='按钮三/div 1/div 2/div 3/div/body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！