全国服务热线:4008-888-888

行业新闻

抽奖小程序流程_js完成简略选项卡功用

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

本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下

首先我们来写HTML代码,构建出整体结构

代码如下:

 !--导航栏部分HTML代码-- 
 nav id="nav" 
 li 选卡1 /li 
 li 选卡2 /li 
 li 选卡3 /li 
 li 选卡4 /li 
 /ul 
 /nav 
 !--内容部分HTML代码-- 
 div id="container" 
 section 内容1 /section 
 section 内容2 /section 
 section 内容3 /section 
 section 内容4 /section 
 /div 

注:section 部分添加了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的代码,实现选项卡功能

代码如下:

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;i oNav.length;i++){
 oNav[i].index=i;
 //每一次得到li后执行鼠标点击操作则触发函数function 
 oNav[i]. unction () { //此处除了可以使用onclick,还可以使用onmouseover
 //在li的个数内依次展示内容 
 for(var i=0;i oNav.length;i++){
 oNav[i].className='';
 oDiv[i].style.display="none";
 this.className='act';
 oDiv[this.index].style.display="block"
 for(var m=1;m oNav.length;m++){
 oNav[m].className='';
 oDiv[m].style.display="none";
};

此上就是用js实现简单选项卡的全部内容,下面是整个代码,复制粘贴到编译器即可运行

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 style 
 text-align: center;
 nav li{
 display: inline;
 width: 24%;
 text-decoration: none;
 padding: 15px;
 li:hover{
 background-color: lightblue;
 section{
 height: 300px;
 /style 
 /head 
 body 
 !--导航栏部分HTML代码-- 
 nav id="nav" 
 li 选卡1 /li 
 li 选卡2 /li 
 li 选卡3 /li 
 li 选卡4 /li 
 /ul 
 /nav 
 !--内容部分HTML代码-- 
 div id="container" 
 section 内容1 /section 
 section 内容2 /section 
 section 内容3 /section 
 section 内容4 /section 
 /div 
 script 
 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;i oNav.length;i++){
 oNav[i].index=i;
 oNav[i]. unction () {
 for(var i=0;i oNav.length;i++){
 oNav[i].className='';
 oDiv[i].style.display="none";
 this.className='act';
 oDiv[this.index].style.display="block"
 for(var m=1;m oNav.length;m++){
 oNav[m].className='';
 oDiv[m].style.display="none";
 /script 
 /body 
 /html 

以下是效果图

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

如果大家还想深入学习,可以点击两个精彩的专题:

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服