手机版

js实现简单的选项卡效果

时间:2021-09-06 来源:互联网 编辑:宝哥软件园 浏览:

效果如下:

代码如下:

!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以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

版权声明:js实现简单的选项卡效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。