js实现了一个简单的切换选项卡效果
例如,最简单、最纯的选项卡
当然,第一步是首先编写HTML代码和CSS样式。
非所有权文件
体、UL、李{ margin: 0;padding: 0;字体:宋体12px / 1.5;}
列表样式:无;}
。包{宽度:500px;保证金:20px汽车;}
隐藏{显示:无;}
# tab_t {身高:25px;底部边框:# 1px solid ccc;}
# tab_t李{浮动:左;宽度:高度:24px 80px;
行高:24px;保证金:0 4px;文本对齐:中心;
边境:1px solid # CCC;底部边框:无;
背景:# f5f5f5;鼠标指针}
# tab_t。法{位置:相对;身高:25px;
利润率底:- 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;
文本对齐:中心;
边境:1px solid # CCC;
边界底部:无;
背景:# f5f5f5;
鼠标指针
}
# tab_t。法{
职位:相对;
身高:25px;
利润率底:- 1px;
背景:# FFF;
}
# tab_c {
边境:1px solid # CCC;
边界顶:无;
填料: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;
文本对齐:中心;
边境:1px solid # CCC;
边界底部:无;
背景:# f5f5f5;
鼠标指针
}
# tab_t。法{
职位:相对;
身高:25px;
利润率底:- 1px;
背景:# FFF;
}
# tab_c {
边境:1px solid # CCC;
边界顶:无;
填料: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
希望本文能对大家的javascript程序设计有所帮助。