简易版HTML+CSS+JavaScript实现tab栏切换制作

最新推荐文章于 2023-11-20 18:08:04 发布

然and然

最新推荐文章于 2023-11-20 18:08:04 发布

阅读量1.2k

点赞数 3

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_52626021/article/details/127856877

版权

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].οnclick=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].οnclick=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>