当前位置:首页 > 日记 > 正文

js实现了一个简单的切换选项卡效果

js实现了一个简单的切换选项卡效果
本文演示了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程序设计有所帮助。

相关文章

ai绘制一个现实的现实相机图标

ai绘制一个现实的现实相机图标

图标,绘制,现实,相机,电脑软件,本教程介绍了一个朋友ai来绘制一个不错的现实相机图标的方法。这个教程真的很好,可以把相机画出来。建议像你这样的朋友一起学习这个教程。 在本教程中,AI学习者使用AI绘制真实的相机图标。相机的纹理很好,我通…

在Javascript中的math.log2e属性使用一个

在Javascript中的math.log2e属性使用一个

解决方案,属性,详细,电脑软件,Javascript,这将返回到基数为2的对数E,约为1.442。 语法 math.log2e 实例uff1a Javascript的数学log2e财产 无功property_value = math.log2e document.write(属性值为:+ property_value); 这将产生以下结果: 属性值为…

QQ空间经典雨天心情谈QQ空间

QQ空间经典雨天心情谈QQ空间

空间,雨天,心情,经典,电脑软件,第一,经典雨天的心情 1、张爱玲说:雨的潺潺声,就像生活在小溪边,宁愿每天下雨,以为你不会因为下雨而来。。 2、有个傻瓜总在动的时候就喜欢说:天下雨了。 3、眼睛为你下雨,心是为你撑伞。 4,现在不再那么幻想,但还是喜…

PS创造一个有光泽的朦胧西方艺术词

PS创造一个有光泽的朦胧西方艺术词

西方,创造一个,朦胧,有光泽,效果,本教程是介绍朋友创建的亮雾PS,用西方艺术字效果,很好的教程,做出来的文字很漂亮,推荐在这里,一起学习吧。 在今天的教程中,我们将使用以前使用的教程的方法,并介绍了一些新的技术,它也是一个老说,最后的效果不是目…

如何制作卡通元素可爱框架入门教程

如何制作卡通元素可爱框架入门教程

框架,元素,入门教程,卡通,可爱,快速制作卡通元素可爱框架 PS漂亮的图片边框设计教程,PS基础课程:快速制作卡通元素可爱相框,本教程介绍了可爱相框的制作,一般过程是利用快速遮罩和滤镜效果进行选择,然后填充适当的颜色,添加一些装饰边框。 首先,创…

快速添加的总页码ppt2003教程为ppt

快速添加的总页码ppt2003教程为ppt

教程,页码,快速,电脑软件,ppt2003演示时,我们通常想到的是如何说的演讲内容,而忘记了ppt2003总数。尤其是当页面数量大,花在前面的幻灯片的时间多了,和后面的内容是没有足够的时间来告诉你。如果你能在ppt2003的总页数是好的,但不喜欢它的两ppt2…

只要四步教你做漂亮的品牌标志字体

只要四步教你做漂亮的品牌标志字体

字体,教你做,标志,漂亮,品牌,下面的小编辑器只为你介绍四个步骤,你可以制作一个漂亮的罗字体品牌,教程很不错,非常适合设计师初学者学习,看看吧。 教你四个步骤制作一个漂亮的牌子罗字体,非常实用,希望你喜欢它! 以上就是教你四个步骤制作一个漂…

Dreamweaver如何快速添加空间

Dreamweaver如何快速添加空间

空间,快速,电脑软件,Dreamweaver,Dreamweaver如何快速添加空间一般来说,在Dreamweaver中,只有一个空格可以被空格键击中。多个空间怎么能连续打这里有三种添加空间的方法,你需要的朋友可以参考。 一般来说,在Dreamweaver中,只有一个空格可以被空…

中英文经典人物签名经典签名

中英文经典人物签名经典签名

经典,中英文,人物,电脑软件,每个人都有自己的座右铭,总是鼓励他们的电源向前进,萧边我给你签名励志,希望大家在任何困难和障碍面前克服失败。 1,即使没有人赞赏你,你也应该有一个优雅的谢幕,感谢你认真的努力。mdash;mdash;即使没有人为你鼓掌,你应…

使用的setutcminutes()在JS处理时间

使用的setutcminutes()在JS处理时间

方法,时间,电脑软件,setutcminutes,JS,Javascript date.setutcminutes()方法设置分为指定的日期,按照一般的时间。 语法 Date.setUTCMinutes(minutesvalue {,secondsvalue {,msvalue } }) 注意:括号内和外部的数据是可选的。 下面是参数的详细信息: mi…

教你用烟花制作字体面具动画

教你用烟花制作字体面具动画

动画,字体,面具,烟花,教你用,本教程将向您介绍如何使用焰火创建字体掩码动画的过程。制作过程很简单,效果很好,转发,有兴趣的朋友不妨一起试试。 本教程将向您介绍如何使用焰火创建字体掩码动画的过程。制作过程很简单,效果很好,转发,有兴趣的朋…

使用PS图象处理软件做书的封面和光

使用PS图象处理软件做书的封面和光

光盘,封面,图象,处理软件,电脑软件,本课程主要是通过PS图象处理软件来设计华丽的封面和盘盖。整体效果非常好。让我们和你喜欢的朋友一起试一试。 本课程主要采用PS图象处理软件设计华丽的封面和盘盖。整体效果非常好。像你这样的朋友可以…