本文实例讲解了四种Java脚本语言实现简单标签选项卡切换的方法，分享给大家供大家参考，具体内容如下效果图：

方法一：用于循环如果判断当前点击与自定义数组是否匹配

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title选项卡切换/title style type='text/css '按钮{ width :120 pxh three : 32px线高： 32px背景色： # CCCfont-size : 24px} div { display: none宽度宽度：200像素高度： 200像素；font-size : 72pxcolor: # ddd背景-颜色：绿色；border:1px纯黑；}/样式/床头柜按钮style='background-color:黄色；1/按钮按钮2/按钮按钮3/按钮按钮4/按钮div style=' display : block1/div div2/div div3/div div4/div脚本类型='text/javascript' //定义数组并获取数组内各个的节点var buttonArr=文档。getelementsbytagname(' button ')；var Divar=文档。GetElementsBytagname(' div ')；for(var I=0；长度；i ) { buttonArr[i].onclick=function(){//this//alert(this。innerhtml)//for循环遍历按钮数组长度for(var j=0；j按钮arr。长度；j ) { //重置所有的按钮样式按钮arr[j]。风格。背景色=' # CCC//给当前的（点击的那个)那个按钮添加样式this.style.backgroundColor='黄色；//隐藏所有的div Divar[j]。风格。显示='无'；//判断当前点击是按钮数组中的哪一个？if(this==buttonArr[j]){//alert(j)；//显示点击按钮对应的div Divar[j]。风格。display=' block} } } }/脚本/正文/html方法二：自定义指数为当前点击

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title选项卡切换/title style type='text/css '按钮{ width :120 pxh three : 32px线高： 32px背景色： # CCCfont-size : 24px} div { display: none宽度宽度：200像素高度： 200像素；font-size : 72pxcolor: # ddd背景-颜色：绿色；border:1px纯黑；}/样式/床头柜按钮style='background-color:黄色；1/按钮按钮2/按钮按钮3/按钮按钮4/按钮div style=' display : block1/div div2/div div3/div div4/div脚本类型=' text/JavaScript ' var buttonArr=document。getelementsbytagname(' button ')；var Divar=文档。GetElementsBytagname(' div ')；for(var I=0；长度；i ) { buttonArr[i].索引=我；//buttonArr[i].setAttribute('index '，I)；按钮.onclick=function(){ for(var j=0；j按钮arr。长度；j){ button arr[j]。风格。背景颜色=' # CCC这个。索引]。风格。背景颜色='黄色；女主角[j]。风格。显示='无'；迪瓦[这个。索引]。风格。display=' block} } }/脚本/正文/html方法三：类名

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title tab/title style type=' text/CSS ' * { padd :0；margin:0}按钮{底色： # CCC宽度：80 px高度：30px }。BTN活动{背景-颜色：黄色；字体粗细：加粗；font-size : 14px} div { width:200px高度： 200像素；font-size : 64px背景-color : # 0c 0；显示器：无；color: # fff}。div-活动{显示器： }块；}/样式/床头柜按钮class='btn-active '按钮1/按钮按钮按钮2/按钮按钮按钮3/按钮按钮按钮4/按钮类=' div-active ' 1/div 2/div 3/div 4/div脚本类型=' text/JavaScript '/1 .先获取元素var按钮列表=文档。getelementsbytagname(' button ')；var div列表=文档。getelementsbytagname(' div ')；//2.添加事件for(var I=0；I按钮列表.长度i ) {按钮列表[i].索引=我；按钮列表[i].onclick=function(){ for(var j=0；j button list . length j){ button list[j].className=divList[j].className=}这个。class NAmE=' BTN-active '；divList[this.index].类名=' div-active '；} }/脚本/正文/html方法四：类名匿名函数的自执行

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title tab/title style type=' text/CSS ' * { padd :0；margin:0}按钮{底色： # CCC宽度：80 px高度：30px }。BTN活动{背景-颜色：黄色；字体粗细：加粗；font-size : 14px} div { width:200px高度： 200像素；font-size : 64px背景-color : # 0c 0；显示器：无；color: # fff}。div-活动{显示器： }块；}/样式/床头柜按钮class='btn-active '按钮1/按钮按钮按钮2/按钮按钮按钮3/按钮按钮按钮4/按钮类=' div-active ' 1/div 2/div 3/div 4/div脚本类型=' text/JavaScript '/1 .先获取元素var按钮列表=文档。getelementsbytagname(' button ')；var div列表=文档。getelementsbytagname(' div ')；//2.添加事件for(var I=0；i buttonList.lengthi ) {(函数{//匿名函数自执行按钮列表[i].onclick=function(){ for(var j=0；j button list . length j){ button list[j].className=divList[j].className=}这个。class NAmE=' BTN-active '；divList[i].类名=' div-active '；} })(一)}/脚本/正文/html如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总jquery选项卡操作方法汇总

希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。