运维开发网

Js实现简单的tab功能

运维开发网 https://www.qedev.com 2022-05-15 16:52 出处:网络
这篇文章主要为大家详细介绍了使用JS实现简单的选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了使用JS实现简单的选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文分享js实现简单tab功能的具体代码,供大家参考。具体内容如下

首先,让我们编写HTML代码,构建整体结构。

代码如下:

lt;!--导航栏部分HTML代码--gt;lt;nav id="nav"gt; lt;ulgt; lt;li class="act"gt;选卡1lt;/ligt; lt;ligt;选卡2lt;/ligt; lt;ligt;选卡3lt;/ligt; lt;ligt;选卡4lt;/ligt; lt;/ulgt;lt;/navgt;lt;!--内容部分HTML代码--gt;lt;div id="container"gt; lt;section class="tab" style="background-color: tomato"gt;内容1lt;/sectiongt; lt;section class="tab" style="background-color: cyan"gt;内容2lt;/sectiongt; lt;section class="tab" style="background-color: blueviolet"gt;内容3lt;/sectiongt; lt;section class="tab" style="background-color: gold"gt;内容4lt;/sectiongt;lt;/divgt;

注意:style是为了方便演示而添加到小节中的,不建议标准化HTML和css的代码样式。

然后我们使用css代码来构建样式。

代码如下:

*{ text-align: center; } nav li{ display: inline; width: 24%; text-decoration: none; padding: 15px; } li:hover{ background-color: lightblue; } section{ height: 300px;}

最后用js代码实现了tab功能。

代码如下:

window.onload=function () { //获取 li 也就是选项卡选项tab var nav=document.getElementById('nav'); var oNav=nav.getElementsByTagName('li'); //获取 包裹在container里面的section(内容) var container=document.getElementById('container'); var oDiv=container.getElementsByClassName('tab'); //使用 循环依次得到li for(var i=0;ilt;oNav.length;i++){ oNav[i].index=i; //每一次得到li后执行鼠标点击操作则触发函数function oNav[i].onclick=function () { //此处除了可以使用onclick,还可以使用onmouseover //在li的个数内依次展示内容 for(var i=0;ilt;oNav.length;i++){ oNav[i].className=''; oDiv[i].style.display="none"; } this.className='act'; oDiv[this.index].style.display="block" } for(var m=1;mlt;oNav.length;m++){ oNav[m].className=''; oDiv[m].style.display="none"; } }};

这就是用js实现简单tab的全部内容。这是完整的代码。将其复制并粘贴到编译器中以运行它。

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;titlegt;Titlelt;/titlegt; lt;stylegt; *{ text-align: center; } nav li{ display: inline; width: 24%; text-decoration: none; padding: 15px; } li:hover{ background-color: lightblue; } section{ height: 300px; } lt;/stylegt;lt;/headgt;lt;bodygt;lt;!--导航栏部分HTML代码--gt;lt;nav id="nav"gt; lt;ulgt; lt;li class="act"gt;选卡1lt;/ligt; lt;ligt;选卡2lt;/ligt; lt;ligt;选卡3lt;/ligt; lt;ligt;选卡4lt;/ligt; lt;/ulgt;lt;/navgt;lt;!--内容部分HTML代码--gt;lt;div id="container"gt; lt;section class="tab" style="background-color: tomato"gt;内容1lt;/sectiongt; lt;section class="tab" style="background-color: cyan"gt;内容2lt;/sectiongt; lt;section class="tab" style="background-color: blueviolet"gt;内容3lt;/sectiongt; lt;section class="tab" style="background-color: gold"gt;内容4lt;/sectiongt;lt;/divgt;lt;scriptgt; window.onload=function () { var nav=document.getElementById('nav'); var oNav=nav.getElementsByTagName('li'); var container=document.getElementById('container'); var oDiv=container.getElementsByClassName('tab'); for(var i=0;ilt;oNav.length;i++){ oNav[i].index=i; oNav[i].onclick=function () { for(var i=0;ilt;oNav.length;i++){ oNav[i].className=''; oDiv[i].style.display="none"; } this.className='act'; oDiv[this.index].style.display="block" } for(var m=1;mlt;oNav.length;m++){ oNav[m].className=''; oDiv[m].style.display="none"; } } };lt;/scriptgt;lt;/bodygt;lt;/htmlgt;

以下是效果图





注意:在互联网上用jQuery实现制表符有很多种方法。只需要三行,下次有机会看懂了再分享。

如果想了解更多,可以点击两个精彩的话题:javascript tab操作方法总结和jquery tab操作方法总结。

这就是本文的全部内容。希望对大家的学习有帮助

0

精彩评论

暂无评论...
验证码 换一张
取 消