JS实现选项卡示例详解

本文描述了JS实现tab的方法。分享给大家参考，如下：

想法：选项卡是点击按钮切换到对应的内容，但实际上是点击按钮通过显示切换内容(无块)。

1.先获取元素。

2.向for循环按钮元素添加onclick或onmousemove事件。

3.由于当前按钮将在单击时以高亮状态显示，因此有必要通过for循环将所有按钮样式设置为空，并将所有DIV显示设置为无。

4.为当前按钮添加样式，显示当前DIV，并将显示设置为块。

注意：要向多个元素添加多个事件，请使用for循环来完成。如果点击并切换选项卡，当前按钮高度、点击和按钮高亮显示是两个事件，因此需要使用两个进行循环。

HTML代码：

div id=' box ' input type=' button ' value=' 1 '/input type=' button ' value=' 2 '/input type=' button ' value=' 3 '/input type=' button ' value=' 4 '/div 1/div div 2/div div 3/div div 4/。

script window . onload=function(){ var box=document . getelementbyid(' box ')；var input=box . getelementsbytagname(' input ')；var div=box.getElementsByTagName(' div ')；for(var I=0；iinput.lengthI ){ //循环onclick事件输入[i]。索引=I；//输入[0]。index=0 index是自定义属性输入[I]。onclick=function(){ for(var I=0；iinput.lengthI ){ //循环删除按钮样式并隐藏div输入[i]。className=div[I]. style . display=' none '；};this.className=' active//添加样式div [this。索引]。风格。显示=' block '到当前按钮；//div表示这个. index就是当前的div，也就是div[0]等。};};};/script增补：用js编写简单选项卡的完整步骤。

如图所示，最简单的纯选项卡。

第一步，当然是先写html代码和css样式。

！键入html heartheta charset=' GB 2312 '/title无标题文档/titlestylebody，ul，Li { margin:0划水：0；font :12 px/1.5 arial；}ul，Li { list-style : none；}.包装{ width:500pxmargin:20px汽车；}.隐藏{ display:none} # tab _ t { height:25pxborder-bottom:1px实心# ccc} # tab _ t li { float:left宽度：80 px；height:24px线高：24 px；margin:0 4px文本对齐：居中；border:1px固体# cccborder-bottom : none；background: # f5f5f5cursor : pointer } # tab _ t . act { position : relative；height:25px保证金-底部：-1px；背景# fff} # tab _ c { border :1 px solid # CCC；border-top : none；padding:20px}/style/head dydiv class=' wrap ' ul id=' tab _ t ' Li class=' act '选择1/Li Li选择2/Li Li选择3/Li Li选择4/Li/ul Div id=' tab _ c ' Div Content 1/Div class=' hide ' Content 2/Div class=' hide ' Content 3/Div class=' hide ' Content 4/Div/Div/body/html step 2，实现简单的切换效果。

1:abc . document . getelementsbytagname(' li '):获取ABC下所有标记为Li的元素，并返回一个带有数组某些属性的元素集。

2:循环，先将onclick事件循环添加到li，然后在onlink事件被点击时，循环删除所有选项卡的动作样式，隐藏所有内容。然后让点击的选项和相应的内容显示出来。

要点：tab _ t _ Li [I]。指数=I；循环时，向选项卡添加一个额外的属性，并分配一个值，使选项卡与内容相对应。

！DOCTYPE html html html healtheeta charset=' GB 2312 '/title无标题文档/titlestylebody，ul，li { margin:0划水：0;font :12 px/1.5 arial；}ul、李{列表式：无；}.包装{ width :500 pxmargin :20 px汽车；}.隐藏{ display : none } # tab _ t { height :25 pxborder-bottom :1 px实心# ccc} # tab _ t li { float:left宽度：80 px高度：24px线高：24 pxmargin:0 4px文本对齐：居中；border:1px固体# cccborder-底部：无；background : # F5 F5 F5 cursor :指针} # tab _ t . act { position : relative；高度：25px保证金-底部：-1px；背景# fff} # tab _ c {边框：1 px实心# CCC边框-top :无；padd :20 px }/样式脚本窗口。onload=function(){ var tab _ t=document。getelementbyid(' tab _ t ')；var tab _ t _ Li=tab _ t . getelementsbytagname(' Li ')；var tab _ c=文档。getelementbyid(' tab _ c ')；var tab _ c _ Li=tab _ c . getelementsbytagname(' div ')；var len=tab _ t _ Li . length var I=0；for(I=0；伊琳；i ){ tab_t_li[i].索引=我；tab_t_li[i].onclick=function(){ for(I=0；伊琳；i ){ tab_t_li[i].类名=tab_c_li[i].隐藏tab_t_li[this.index].acttab_c_li[this.index].{ } }/script/head dydiv=' wrap ' ul id=' tab _ t ' Li class=' act '选择1/李莉选择2/李莉选择3/李莉选择4/li /ul div id='tab_c' div内容1/div div class='隐藏'内容2/div类=隐藏内容3/div类=隐藏内容4/分区/分区/分区/正文/html第三步，写成函数。上面的写法只能一个页面用一个选项卡，如果再加一个的话，就需要复制一份，再改很多变量名。

要点：tab_t_li[i][evt]因为传值的时候是字符串，如果直接写的话就是tab_t_li[i].' onclick '这样话是执行不了的，tab_t_li['onclick']这样执行没问题。

好了，现在一个页面上就可以有多个切换了，只需要调用函数的时候，写上相应的编号名和标签名，事件名称就可以了

！DOCTYPE html html html healtheeta charset=' GB 2312 '/title无标题文档/titlestylebody，ul，li { margin:0划水：0;font :12 px/1.5 arial；}ul、李{列表式：无；}.包装{ width :500 pxmargin :20 px汽车；}.隐藏{ display : none } # tab _ t { height :25 pxborder-bottom :1 px实心# ccc} # tab _ t li { float:left宽度：80 px高度：24px线高：24 pxmargin:0 4px文本对齐：居中；border:1px固体# cccborder-底部：无；background : # F5 F5 F5 cursor :指针} # tab _ t . act { position : relative；高度：25px保证金-底部：-1px；背景# fff} # tab _ c {边框：1 px实心# CCC边框-top :无；padd :20 px }/style script window。onload=function(){ tab(' tab _ t '，' li '，' tab_c '，' div '，' onmouseover') function tab(tab_t，tab_t_tag，tab_c，tag_c_tag，evt){ var tab _ t=document。getelementbyid(tab _ t)；var tab _ t _ Li=tab _ t . getelementsbytagname(tab _ t _ tag)；var tab _ c=文档。getelementbyid(tab _ c)；var tab _ c _ Li=tab _ c . getelementsbytagname(tag _ c _ tag)；var len=tab _ t _ Li . length var I=0；for(I=0；伊琳；i ){ tab_t_li[i].索引=我；tab _ t _ Li[I][evt]=function(){ for(I=0；伊琳；i ){ tab_t_li[i].类名=tab_c_li[i].隐藏tab_t_li[this.index].acttab_c_li[this.index].} } } }/script/head dydiv=' wrap ' ul id=' tab _ t ' Li class=' act '选择1/李莉选择2/李莉选择3/李莉选择4/li /ul div id='tab_c' div内容1/div div class='隐藏'内容2/div类=隐藏内容3/div类=隐藏内容4/分区/分区/分区/正文/html希望本文所述对大家Java脚本语言程序设计有所帮助。