HTML+CSS+JavaScript实现tab栏切换制作
准备部分
HTML部分：切换栏由一个列表组成 每个内容写在分别一个div盒子里
CSS部分：列表：去除序列点，给每个修改样式 ；内容：让整个内容都隐藏起来
JavaScript:获取切换栏元素和类容元素 ；功能：点击不同的任务 出现相应的内容 ，切换任务隐藏之前出现的内容和任务样式，单独出现相应的标题样式和内容
代码部分
第一步实现HTML与CSS的内容
<div>
<div>
<ul class="tabTitle">
<li>游戏</li>
<li>音乐</li>
<li>学习</li>
</ul>
</div>
<div class="tabBody" >
<div>游戏内容</div>
<div>音乐内容</div>
<div>学习内容</div>
</div>
<style>
.tabTitle li{
list-style: none;
background-color: #4CAF50; /* Green */
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.tabBody div{
display: none;
}
</style>
第二步JavaScript部分
var tabTitle=document.querySelectorAll('li');//获取任务栏的元素
var tabBody=document.querySelector('.tabBody').querySelectorAll('div');//获取内容元素
for(var i=0;i<tabTitle.length;i++){//通过for循环使遍历tabTitle这个伪数组，使每个任务都能通过一个注册时间获得相同的功能
tabTitle[i].setAttribute('index',i);//让每个任务都添加一个自创的属性index，通过index=i来让任务按0-tabTitle.length-1来排列，为后面切换任务出现自己独有的内容做准备
tabTitle[i].onclick=function (){//给每个任务元素，注册事件（点击事件）
for(var i=0;i<tabTitle.length;i++){//1.清除在js部分给任一任务添加的背景颜色
tabTitle[i].style.backgroundColor='';
}
this.style.backgroundColor='red';//2.在1的情况下给点击的任务的背景颜色设为red
var index=this.getAttribute('index')//获取当前点击的任务的index
for (var i=0;i<tabBody.length;i++){
tabBody[i].style.display='none';//1.清除在js部分给任一内容的display='block‘，隐藏上一个任务的内容
}
tabBody[index].style.display='block';//2.在1的情况下出现点击任务相应的类容
}
}
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tabTitle li{
list-style: none;
background-color: #4CAF50; /* Green */
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.tabBody div{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<ul class="tabTitle">
<li>游戏</li>
<li>音乐</li>
<li>学习</li>
</ul>
</div>
<div class="tabBody" >
<div>游戏内容</div>
<div>音乐内容</div>
<div>学习内容</div>
</div>
</div>
<script>
var tabTitle=document.querySelectorAll('li');//获取任务栏的元素
var tabBody=document.querySelector('.tabBody').querySelectorAll('div');//获取内容元素
for(var i=0;i<tabTitle.length;i++){//通过for循环使遍历tabTitle这个伪数组，使每个任务都能通过一个注册时间获得相同的功能
tabTitle[i].setAttribute('index',i);//让每个任务都添加一个自创的属性index，通过index=i来让任务按0-tabTitle.length-1来排列，为后面切换任务出现自己独有的内容做准备
tabTitle[i].onclick=function (){//给每个任务元素，注册事件（点击事件）
for(var i=0;i<tabTitle.length;i++){//1.清除在js部分给任一任务添加的背景颜色
tabTitle[i].style.backgroundColor='';
}
this.style.backgroundColor='red';//2.在1的情况下给点击的任务的背景颜色设为red
var index=this.getAttribute('index')//获取当前点击的任务的index
for (var i=0;i<tabBody.length;i++){
tabBody[i].style.display='none';//1.清除在js部分给任一内容的display='block‘，隐藏上一个任务的内容
}
tabBody[index].style.display='block';//2.在1的情况下出现点击任务相应的类容
}
}
</script>
</body>
</html>
效果图片
标签：index,style,JavaScript,HTML,tabTitle,tab,var,tabBody,display From： https://www.cnblogs.com/xiaozhiran/p/16890684.html