本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下
首先我们来写HTML代码,构建出整体结构
代码如下:
- 选卡1
- 选卡2
- 选卡3
- 选卡4
内容1
内容2
内容3
内容4
注: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.οnlοad=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[i].index=i;
//每一次得到li后执行鼠标点击操作则触发函数function
oNav[i].οnclick=function () { //此处除了可以使用onclick,还可以使用onmouseover
//在li的个数内依次展示内容
for(var i=0;i
oNav[i].className='';
oDiv[i].style.display="none";
}
this.className='act';
oDiv[this.index].style.display="block"
}
for(var m=1;m
oNav[m].className='';
oDiv[m].style.display="none";
}
}
};
此上就是用js实现简单选项卡的全部内容,下面是整个代码,复制粘贴到编译器即可运行
Title*{
text-align: center;
}
nav li{
display: inline;
width: 24%;
text-decoration: none;
padding: 15px;
}
li:hover{
background-color: lightblue;
}
section{
height: 300px;
}
- 选卡1
- 选卡2
- 选卡3
- 选卡4
内容1
内容2
内容3
内容4
window.οnlοad=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[i].index=i;
oNav[i].οnclick=function () {
for(var i=0;i
oNav[i].className='';
oDiv[i].style.display="none";
}
this.className='act';
oDiv[this.index].style.display="block"
}
for(var m=1;m
oNav[m].className='';
oDiv[m].style.display="none";
}
}
};
以下是效果图
注:网上还用很多用jQuery实现选项卡的方法,只需三行,等下次有机会弄懂了再分享。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。