这篇文章主要为大家详细介绍了使用射流研究…实现简单的选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文为大家分享了射流研究…实现简单选项卡功能的具体代码,供大家参考,具体内容如下
首先我们来写超文本标记语言代码,构建出整体结构
代码如下:
!-导航栏部分超文本标记语言代码-
导航id='导航'
保险商实验所
李表演选卡1/李
里选卡2/李
里选卡3/李
里选卡4/李
/ul
/导航
!-内容部分超文本标记语言代码-
div id='容器'
section class=' tab ' style=' background-color:番茄'内容1/部分
section class=' tab ' style=' background-color:青色'内容2/截面
section class=' tab ' style=' background-color:蓝紫色'内容3/截面
' tab ' style=' background-color:gold '内容4/部分
/div
注:部分部分添加了风格,目的是方便演示,为规范超文本标记语言与钢性铸铁的代码风格,不推荐这样使用。
接着我们使用钢性铸铁代码构建出样式
代码如下:
*{
文本对齐:居中;
}
李导航
显示:内嵌;
宽度:24%;
文字-装饰:无;
填充:15px
}
李:盘旋{
背景色:浅蓝色;
}
部分{
高度:300像素
}
最后是射流研究…的代码,实现选项卡功能
代码如下:
window.onload=function () {
//获取里也就是选项卡选项标签
var nav=文档。getelementbyid(' nav ');
var oNav=nav。getelementsbytagname(' Li ');
//获取包裹在容器里面的部分(内容)
var容器=文档。getelementbyid(“容器”);
var oDiv=容器。getelementsbyclassname(' tab ');
//使用循环依次得到里
for(var I=0;ioNav.lengthi)
oNav[i].index=I;
//每一次得到里后执行鼠标点击操作则触发函数功能
oNav[i].onclick=function () { //此处除了可以使用onclick,还可以使用onmouseover
//在里的个数内依次展示内容
for(var I=0;ioNav.lengthi)
oNav[i].类名=" ";
oDiv[I]。风格。display=' none
}
这个。class name=" act
oDiv【这个。索引】。风格。display=' block '
}
for(var m=1;moNav.lengthm ){
欧纳夫[m].类名=" ";
oDiv[m]。风格。display=' none
}
}
};
此上就是用射流研究…实现简单选项卡的全部内容,下面是整个代码,复制粘贴到编译器即可运行
!文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题标题/标题
风格
*{
文本对齐:居中;
}
李导航
显示:内嵌;
宽度:24%;
文字-装饰:无;
填充:15px
}
李:盘旋{
背景色:浅蓝色;
}
部分{
高度:300像素
}
/风格
/头
身体
!-导航栏部分超文本标记语言代码-
导航id='导航'
保险商实验所
李表演选卡1/李
里选卡2/李
里选卡3/李
里选卡4/李
/ul
/导航
!-内容部分超文本标记语言代码-
div id='容器'
section class=' tab ' style=' background-color:番茄'内容1/部分
section class=' tab ' style=' background-color:青色'内容2/截面
section class=' tab ' style=' background-color:蓝紫色'内容3/截面
' tab ' style=' background-color:gold '内容4/部分
/div
脚本
window.onload=function () {
var nav=文档。getelementbyid(' nav ');
var oNav=nav。getelementsbytagname(' Li ');
var容器=文档。getelementbyid(“容器”);
var oDiv=容器。getelementsbyclassname(' tab ');
for(var I=0;ioNav.lengthi)
oNav[i].index=I;
oNav[i].onclick=function () {
for(var I=0;ioNav.lengthi)
oNav[i].类名=" ";
oDiv[I]。风格。display=' none
}
这个。class name=" act
oDiv【这个。索引】。风格。display=' block '
}
for(var m=1;moNav.lengthm ){
欧纳夫[m].类名=" ";
oDiv[m]。风格。display=' none
}
}
};
/脚本
/body
/html
以下是效果图
注:网上还用很多用jQuery实现选项卡的方法,只需三行,等下次有机会弄懂了再分享。
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总jquery选项卡操作方法汇总
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。