Javaｓｃｒｉｐｔ实现标签切换的四种方法
选项卡切换在Web页面中非常常见，因此最近总结了4种实现。首先，用最简单的风格编写tab的框架，代码如下：
* {
填充：0；
保证金：0；
}
李{
列表样式：无；
浮点数：左；
}
# tabcon {
清楚：两者；
}
标题1
标题两
标题三
标题四
含量1
内容两
含量三
含量四
当前显示效果如下所示：
页面中显示了四个选项卡标题和四个内容区域。现在我们需要实现标签切换效果，即单击标题一，内容显示，其他内容不显示，点击标题二，内容二显示，其他内容不显示。
总的来说，将四个标题绑定在一起是很简单的，当触发触发时，相应的内容就会显示出来，而其他内容则是隐藏的。
方法一：单击与内容对应的标题显示非点击标题的内容被隐藏：
* {
填充：0；
保证金：0；
}
李{
列表样式：无；
}
函数选项卡（PID）{
var标签= {表
对于（var i = 0；i < 4；i + +）{
如果（制表符{ i = PID）{
document.getelementbyid（标签{我}）。风格。显示为块；
其他{ }
document.getelementbyid（标签{我}）。风格。显示为无；
}
}
}
标题1
标题两
标题三
标题四
含量1
内容两
含量三
含量四
方法二：将所有内容设置为隐藏，然后单击标题显示所使用的内容：
* {
填充：0；
保证金：0；
}
李{
列表样式：无；
浮点数：左；
}
# tabcon {
清楚：两者；
}
# tabcon_1 {
显示：无；
}
# tabcon_2 {
显示：无；
}
# tabcon_3 {
显示：无；
}
功能changetab（tabcon_num）{
对于（i = 0；i < 3；i + +）{
document.getelementbyid（tabcon_ +我。风格。显示为无）； / /所有的层都隐藏
}
document.getelementbyid（tabcon_ + tabcon_num。风格。显示为块）； / /显示当前层
}
标题1
标题两
标题三
标题四
含量1
内容两
含量三
含量四
方法：三显示类控件是隐藏的，首先所有的隐藏显示内容设置为无，而类显示设置为块，和所有节点的节点遍历的内容标题，点击标题，标题和内容类节点，节点没有其他。代码如下：
* {
填充：0；
保证金：0；
}
李{
列表样式：无；
浮点数：左；
}
{ # tabcon
清楚：两者；
}
# tabcon { div
显示：无；
}
# tabcon { div.fdiv
显示块；
}
标题1
标题两
标题三
标题四
含量1
内容两
含量三
含量四
var标签= document.getelementbyid（标签），GetElementsByTagName（李）；
var div = document.getelementbyid（tabcon）。GetElementsByTagName（div）；
对于（var i = 0；i < tabs.length；i++）{
标签{我}。onclick=功能（）{改变（这）；}
}
功能的改变（obj）{
对于（var i = 0；i < tabs.length；i++）{
如果（标签{我} = = obj）{
标签{我}。类名=外衣；
div {我}。类名=讯号；
其他{ }
标签{我} classname = ；
div {我} classname = ；
}
}
}
这种方法的缺点是在内容块的div下不再有div标签。
方法四：不要使用js，使用输入：选中要做tab开关，首先要隐藏所有内容，选中内容才能显示：
输入：选项卡切换的检查实现
输入{
不透明度：0； *输入隐藏选择框
}
标签{
光标：指针；
浮点数：左；
}
标签：悬停{
背景：# Eee；
}
输入：选中+标签{
颜色：红色；
}
选择输入前的制表符：type（x）的n：选中的面板。面板：第n个子（x）。
制表符输入：类型的n（1）：选中的面板。面板：第n个子（1），
制表符输入：类型的n（2）：选中的面板。面板：第n个子（2）{
不透明性：1；
}
面板{。
不透明性：0；
位置：绝对；区域位置的内容。
}
标题1
标题两
含量1
内容两
这种方法的缺点是只能单击不同区域的切换。
以上是对TAB开关实现方法的总结，希望能对大家的学习有所帮助，遵循这个思路，使自己的制表开关效果好。