js实现简单选项卡功能
本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下
首先我们来写HTML代码,构建出整体结构
代码如下:
<!--导航栏部分HTML代码-->
<nav id="nav">
<ul>
<li class="act">选卡1</li>
<li>选卡2</li>
<li>选卡3</li>
<li>选卡4</li>
</ul>
</nav>
<!--内容部分HTML代码-->
<div id="container">
<section class="tab" style="background-color: tomato">内容1</section>
<section class="tab" style="background-color: cyan">内容2</section>
<section class="tab" style="background-color: blueviolet">内容3</section>
<section class="tab" style="background-color: gold">内容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].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实现简单选项卡的全部内容,下面是整个代码,复制粘贴到编译器即可运行
<!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">
<ul>
<li class="act">选卡1</li>
<li>选卡2</li>
<li>选卡3</li>
<li>选卡4</li>
</ul>
</nav>
<!--内容部分HTML代码-->
<div id="container">
<section class="tab" style="background-color: tomato">内容1</section>
<section class="tab" style="background-color: cyan">内容2</section>
<section class="tab" style="background-color: blueviolet">内容3</section>
<section class="tab" style="background-color: gold">内容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].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";
}
}
};
</script>
</body>
</html>
以下是效果图
注:网上还用很多用jQuery实现选项卡的方法,只需三行,等下次有机会弄懂了再分享。
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上是 js实现简单选项卡功能 的全部内容, 来源链接: utcz.com/z/328899.html