本文为大家分享了射流研究…实现简单选项卡功能的具体代码，供大家参考，具体内容如下

首先我们来写超文本标记语言代码，构建出整体结构

代码如下：

！-导航栏部分超文本标记语言代码- nav id='nav' ul li class='act '选卡1/李莉选卡2/李莉选卡3/李莉选卡4/li /ul/nav！-内容部分超文本标记语言代码-div id=' container ' section class=' tab ' style='底色：番茄'内容1/section section class=' tab ' style='底色：青色'内容2/section section class=' tab ' style='底色：蓝紫色'内容3/section section class=' tab ' style='底色：金色'内容4/部门/部门注：部分部分添加了风格，目的是方便演示，为规范超文本标记语言与钢性铸铁的代码风格，不推荐这样使用。

接着我们使用钢性铸铁代码构建出样式

代码如下：

* { text-align :居中；} nav li { display: inline宽度： 24%;文本装饰：无；padding: 15px } Li :悬停{背景色：浅蓝色；}截面{ height: 300px}最后是射流研究…的代码，实现选项卡功能

代码如下：

window.onload=function () { //获取里也就是选项卡选项tab var nav=文档。getelementbyid(' nav ')；var oNav=nav。getelementsbytagname(' Li ')；//获取包裹在容器里面的部分（内容)var容器=文档。getelementbyid(“容器”)；var oDiv=容器。getelementsbyclassname(' tab ')；//使用循环依次得到里为(var I=0；ioNav.lengthi ){ oNav[i].索引=我；//每一次得到里后执行鼠标点击操作则触发函数函数我.onclick=function () { //此处除了可以使用舔舔，还可以使用onmouseover //在里的个数内依次展示内容for(var I=0；ioNav.lengthi ){ oNav[i].className=oDiv[I]。风格。display=" none} this . NAmE=' actdiv[this。索引]。风格。显示=' block ' }为(var m=1；moNav.lengthm ){ oNav[m].className=oDiv[m]。风格。display=" none} }};此上就是用射流研究…实现简单选项卡的全部内容，下面是整个代码，复制粘贴到编译器即可运行

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { text-align : center；} nav li { display: inline宽度： 24%;文本装饰：无；padding: 15px } Li :悬停{背景色：浅蓝色；}截面{ height : 300 px }/style/head dy！-导航栏部分超文本标记语言代码- nav id='nav' ul li class='act '选卡1/李莉选卡2/李莉选卡3/李莉选卡4/li /ul/nav！-内容部分超文本标记语言代码-div id=' container ' section class=' tab ' style='底色：番茄'内容1/section section class=' tab ' style='底色：青色'内容2/section section class=' tab ' style='底色：蓝紫色'内容3/section section class=' tab ' style='底色：金色'内容4/section/div脚本窗口。onload=function(){ var nav=document。getelementbyid(' nav ')；var oNav=nav。getelementsbytagname(' Li ')；var容器=文档。getelementbyid(“容器”)；var oDiv=容器。getelementsbyclassname(' tab ')；for(var I=0；ioNav.lengthi ){ oNav[i].索引=我；我.onclick=function(){ for(var I=0；ioNav.lengthi ){ oNav[i].className=oDiv[I]。风格。display=" none} this . NAmE=' actdiv[this。索引]。风格。显示=' block ' }为(var m=1；moNav.lengthm ){ oNav[m].className=oDiv[m]。风格。display=" none} } };/脚本/正文/html以下是效果图

注：网上还用很多用框架实现选项卡的方法，只需三行，等下次有机会弄懂了再分享。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。