javascript实现标签切换的四种方法

标签切换在网页中很常见，故最近总结了四种实现方法。首先，写出标签的框架，加上最简单的样式，代码如下：

！DOCTYPE html html hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style * { padd : 0；保证金： 0；}李{列表式：无；float : left } # Tabcon { clear :双双；}/style/head body div id=' TanContainer ' div id=' tab ' ul Li标题一/li li标题二/li li标题三/li li标题四/li /ul /div div id='tabCon' div内容一/div内容二/div内容三/div内容四/div /div /div /body /html现在的显示效果如下图：

四个标签标题和四个内容区都显示在了页面中，现在要实现标签切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示……那么，整体思路很简单，给四个标题绑定事件，触发的时候对应的内容显示，其他的内容隐藏。

方法一：点击标题对应的内容显示，非点击标题对应的内容隐藏。代码如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style * { padd : 0；保证金： 0；}李{列表式：无；}/样式脚本函数tab(PID){ var tab=[' tab 1 '，' tab2 '，' tab3 '，' tab 4 ']；for(var I=0；i4；I){ if(tab[I]==PID){文档。getelementbyid(选项卡[I])。风格。display=' block}else{ document.getElementById(制表符[一])。风格。显示='无'；} } }/script/head/body div id=' Tancontainer ' div id=' tabNav ' ul Li onclick=' tab '(' tab1 ')标题一/Li Li单击=' tab '(' tab 2 ')标题二/Li Li单击=“制表符”(制表符3)标题三/Li Li单击=“制表符”(制表符4)标题四/Li/ul/div div id=' tab ' div id=' tab 1 '内容一/div div id='tab2 '内容二/div div id='tab3 '内容三/div div id='tab4 '内容四/div /div /div /body /html方法二：先设置所有内容隐藏，然后点击标题对用的内容显示。代码如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style * { padd : 0；保证金： 0；}李{列表式：无；float : left } # Tabcon { clear :双双；} # Tabcon _ 1 { display : none } # Tabcon _ 2 { display : none } # Tabcon _ 3 { display : none }/style脚本函数更改tab(tabCon _ num){ for(I=0；I=3；I){文档。getelementbyid(' tabCon _ I ')。风格。显示='无'；//将所有的层都隐藏}文档。getelementbyid(' tabCon _ ' tabCon _ num。).风格。display=' block//显示当前层}/script/head body div id=' tanContainer ' div id=' tab ' ul Li onclick=' change tab '(0)标题一/Li Li onclick=' ChangeTab '(1 ')标题二/li li onclick='changeTab('2 ')标题三/li li onclick='changeTab('3 ')'标题四/Li/ul/div div id=' Tabcon ' div id=' Tabcon _ 0 '内容一/div div id='tabCon_1 '内容二/div div id='tabCon_2 '内容三/div div id='tabCon_3 '内容四/div /div /div /body /html方法三：显示和隐藏通过是有拥有班级控制，先把所有的内容隐藏冷静地设为没有，而该班级的显示设置为街区，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有同学们，其他的没有。代码如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style * { padd : 0；保证金： 0；}李{列表式：无；float : left } # Tabcon { clear :双双；} # Tabcon div { display : none } # Tabcon div。fdiv {显示：块；}/style/head body div id=' TanContainer ' div id=' tab ' ul Li class=' fli '标题一/li li标题二/li li标题三/li li标题四/Li/ul/div div id=' Tabcon ' div class=' fdiv '内容一/div内容二/div内容三/div内容四/div /div /div /body脚本var tab=文档。getelementbyid(' tab ').getElementsByTagName(' Li ')；var divs=文档。getelementbyid(' tabCon ').getElementsByTagName(' div ')；for(var I=0；itabs.lengthI){ tab[I].onclick=function(){ change(this)；} }函数更改(obj){ for(var I=0；itabs . lengthi){ if(tab[I]==obj){ tab[I].类名=' flidivs[i].else { tab[I]} .className=divs[i].className=} } }/脚本/html该方法的缺点是，内容块的差异下面不能再有差异标签了。

方法四：不用js，用"输入：已检查"来做标签切换，先把所有的内容隐藏，被选中的内容显示。代码如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；选中charset=utf-8 '/title输入：实现标签切换/title样式输入{ opa city 3360 0；/*隐藏投入的选择框*/}标签cursor:指针；/*鼠标移上去变成手状*/float:左侧；}标签:悬停{背景： # eee}输入：选中的标签{ color:红色；} /*选择前面有。制表符输入：第类：个选中的面板。第：个面板-儿童(x)*/.制表符输入：第(1)种类型：选中~。面板。第：小组——儿童(1 ).制表符输入：第(2)种类型：选中~。面板。面板： th-child(2){ opa city 3360 1；} .面板{ opa city 3360 0；绝对位置：/*使内容区域位置一样*/}/style/head body div class=' tab '输入选中id=' one ' name=' tabs ' type=' radio '标签为='一'标题一/label input id=' two ' name=' tab ' type=' radio ' label for=' two '标题二/label div class=' panels ' div class=' panels ' p内容一/p/div class=' panel ' p内容二/p/div/div/body/html该方法的缺点是，不同区域切换只能通过点击。

以上就是为大家总结的标签切换实现方法，希望对大家的学习有所帮助，顺着这个思路动手制作自己标签切换特效。