这篇文章主要为大家详细介绍了使用射流研究…实现简单的选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文为大家分享了射流研究…实现简单选项卡功能的具体代码，供大家参考，具体内容如下
首先我们来写超文本标记语言代码，构建出整体结构
代码如下：
！-导航栏部分超文本标记语言代码-
导航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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。