js实现选项卡详解

本文演示了js实现制表符的方式：

想法：标签是点击按钮切换到相应的内容，实际上，点击按钮通过显示切换内容（无框）。

1。首先，获取元素。

2、for循环通过按钮元素添加onclick或者移动鼠标事件。

3，因为单击当前按钮将显示高状态，所以必须将所有按钮样式设置为空，并将所有div显示设置为循环日历。

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

注意：将多个事件添加到多个元素将通过for循环循环。例如，选项卡是单击开关，当前按钮高度、单击和按钮是2个事件，因此您必须循环使用2个循环。

HTML代码：

一
二
三
四
JS代码：
窗口。指针函数（）{
VaR箱= document.getelementbyid（'box）；
无功输入= box.getelementsbytagname（输入的）；
var div =箱.. getElementsByTagName（'div）；
对于（var i = 0；i < input.length；i++）{ / /循环遍历的onclick事件
输入{索引i =；输入{ 0 }。索引= 0索引是一个自定义属性。
输入{我}。onclick =函数（）{
对于（var i = 0；i < input.length；i++）{ / /圆形的日历时间删除按钮风格和Div.
输入{我} classname = ''；
div {我}。风格显示=不关；
}；
这一方法=活动； / /按钮添加样式
div { }。指数。风格。显示=阻止'； / / DIV显示this.index是当前div，div { 0 }，等等
}；
}；
}；
补充：用js编写简单制表符的完整步骤

例如，最简单、最纯的选项卡
当然，第一步是首先编写HTML代码和CSS样式。

非所有权文件

体、UL、李{ margin: 0；padding: 0；字体：宋体12px / 1.5；}
列表样式：无；}
。包{宽度：500px；保证金：20px汽车；}
隐藏{显示：无；}
# tab_t {身高：25px；底部边框：# 1px solid ccc；}
# tab_t李{浮动：左；宽80px；身高：24px；线高度：24px；保证金：0 4px；文本对齐：中心；border: 1px solid # CCC；边界：1px；
# tab_t。法{位置：相对；身高：25px；margin-bottom: - 1px；背景：# FFF；}
# tab_c { border: 1px solid # CCC；边境上：无；padding: 20px；}
选择1
选择2
选择3
选择4
含量1
含量2
含量3
含量4
实现简单切换效果的第二步

要点1：abc.document.getelementsbytagname（李）：让所有被标记为立下ABC的元素，返回一个元素集，并有一些属性的数组。

第2点：循环。第一个周期里加onclick事件。然后安翔事件点击，然后回收所有选项卡的行事风格和隐藏所有内容。然后让点击选项和相应的内容显示。

关键点3：tab_t_li {我}。指数=我；在循环中，添加一个额外的属性指定一个值的标签做标签和内容之间的对应关系。

非所有权文件

体、UL、李{ margin: 0；padding: 0；字体：宋体12px / 1.5；}
列表样式：无；}
。包{宽度：500px；保证金：20px汽车；}
隐藏{显示：无；}
# tab_t {身高：25px；底部边框：# 1px solid ccc；}
# tab_t李{浮动：左；宽80px；身高：24px；线高度：24px；保证金：0 4px；文本对齐：中心；border: 1px solid # CCC；边界：1px；
# tab_t。法{位置：相对；身高：25px；margin-bottom: - 1px；背景：# FFF；}
# tab_c { border: 1px solid # CCC；边境上：无；padding: 20px；}
在window.onload =函数（）{
无功tab_t = document.getelementbyid（tab_t ）；
无功tab_t_li = tab_t.getelementsbytagname（礼）；
无功tab_c = document.getelementbyid（tab_c ）；
无功tab_c_li = tab_c.getelementsbytagname（div）；
VaR len = tab_t_li.length；
var I＝0；
对于（i = 0；i；；i；+；+）{
我tab_t_li { }。指数=我；
我tab_t_li { }。onclick =函数（）{
对于（i = 0；i；；i；+；+）{
tab_t_li {我} classname =；
tab_c_li {我}类名= 'hide；
}
tab_t_li { }。指数名称=共舞；
tab_c_li { }。指数名称= ''；
}
}
}
选择1
选择2
选择3
选择4
含量1
含量2
含量3
含量4
第三步是作为一个函数编写的，上面的方法只能在一页上使用一个标签。如果您添加另一个，您需要复制一个副本并更改一些变量名。

要点：tab_t_li {我} { EVT }，因为价值是传播，它是一个字符串。如果是直接写出来，这是tab_t_li {我}。onclick

好了，现在页面上有多次切换。调用函数时，写出相应的ID名和标记名，事件名即可。

非所有权文件

体、UL、李{ margin: 0；padding: 0；字体：宋体12px / 1.5；}
列表样式：无；}
。包{宽度：500px；保证金：20px汽车；}
隐藏{显示：无；}
# tab_t {身高：25px；底部边框：# 1px solid ccc；}
# tab_t李{浮动：左；宽80px；身高：24px；线高度：24px；保证金：0 4px；文本对齐：中心；border: 1px solid # CCC；边界：1px；
# tab_t。法{位置：相对；身高：25px；margin-bottom: - 1px；背景：# FFF；}
# tab_c { border: 1px solid # CCC；边境上：无；padding: 20px；}
在window.onload =函数（）{
Tab（tab_t
功能表（tab_t，tab_t_tag，tab_c，tag_c_tag，EVT）{
无功tab_t = document.getelementbyid（tab_t）；
无功tab_t_li = tab_t.getelementsbytagname（tab_t_tag）；
无功tab_c = document.getelementbyid（tab_c）；
无功tab_c_li = tab_c.getelementsbytagname（tag_c_tag）；
VaR len = tab_t_li.length；
var I＝0；
对于（i = 0；i；；i；+；+）{
我tab_t_li { }。指数=我；
tab_t_li {我} { } = {（）函数的极值
对于（i = 0；i；；i；+；+）{
tab_t_li {我} classname =；
tab_c_li {我}类名= 'hide；
}
tab_t_li { }。指数名称=共舞；
tab_c_li { }。指数名称= ''；
}
}
}
}
选择1
选择2
选择3
选择4
含量1
含量2
含量3
含量4
希望本文能对javaｓｃｒｉｐｔ程序设计有所帮助。