现在的位置: 首页 > 脚本 > 正文

js实现简单选项卡功能

2019年11月04日 脚本 ⁄ 共 1686字 ⁄ 字号 暂无评论

代码如下:

内容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.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].onclick=function () { //此处除了可以使用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实现简单选项卡的全部内容,下面是整个代码,复制粘贴到编译器即可运行

*{
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

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].onclick=function () {
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";
}
}
};

以下是效果图

给我留言

留言无头像?