devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js实现tab栏切换_js 人物tab栏切换

作者：2023面试高手 | 2024-02-08 14:16:55

赞

踩

js 人物tab栏切换

实现思路： 
（1）整个tab栏是由2个div模块组成，分别是头部选项栏和中间内容模块（蓝色框）。

（2）头部选项栏点击其中任意一个，当前点击的一栏底色及字体颜色发生改变，其余不变。用排他思想实现。

（3）用for循环为头部选项栏所有元素绑定点击事件。

（4）中间的内容模块会跟随选项栏变化，因此显示隐藏的模块要放在点击事件的里边。且要满足：中间模块显示的内容要和上面的选项栏一一对应。

（5）最终达到的效果为：当我们点击头部选项栏，中间内容模块会显示对应的图片，其余的图片则会隐藏(排他思想）。

需要注意的点：1、我们一开始是将中间内容模块隐藏，此时需要在中间内容模块中添加一个展示类，使得中间模块在默认状态下内容不为空。2、由于我们采用了document.querySelectorAll()来获取元素，因此获取到的头部选项栏和中间内容模块的所有元素，类型是下标为0开始的列表，由此来实现一一对应匹配。

代码示例：

  1. <!DOCTYPE html>
  2.     <html lang="en">   
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>tab栏切换</title>
  8.         <style>
  9.             * {
  10.                 margin: 0;
  11.                 padding: 0;
  12.             }
  13.             
  14.             li {
  15.                 list-style: none;
  16.             }
  17.             
  18.             .box {
  19.                 width: 600px;
  20.                 margin: 100px auto;
  21.             }
  22.             
  23.             .box-top {
  24.                 overflow: hidden;
  25.                 width: 400px;
  26.                 background-color: whitesmoke;
  27.             }
  28.             
  29.             .box-top ul li {
  30.                 float: left;
  31.                 width: 100px;
  32.                 height: 30px;
  33.                 line-height: 30px;
  34.                 text-align: center;
  35.                 
  36.             }
  37.             
  38.             .tab li.active {
  39.                 background-color: #ccc;
  40.                 color:peru;
  41.             }
  42.             
  43.             .box-middle {
  44.                 margin-top: 0;
  45.             }
  46.             
  47.             .box-middle .item {
  48.                 display: none;
  49.                 float: left;
  50.             }
  51.  
  52.             .box-middle .item.active {
  53.                 display: block;
  54.             }
  55.         </style>
  56.     </head>
  57.     
  58.     <body>
  59.         <div class="box">
  60.             <div class="box-top">
  61.                 <ul class="tab">
  62.                     <li class="tab-item active">第一张</li>
  63.                     <li class="tab-item">第二张</li>
  64.                     <li class="tab-item">第三张</li>
  65.                     <li class="tab-item">第四张</li>
  66.                 </ul>
  67.             </div>
  68.  
  69.             <div class="box-middle">
  70.                 <div class="item active"> //默认展示页面
  71.                    <a href="###"><img src="./image/1.jpg" alt=""></a>
  72.                 </div>
  73.                 <div class="item">
  74.                     <a href="###"><img src="./image/2.jpg" alt=""></a>
  75.                 </div>
  76.                 <div class="item">
  77.                     <a href="###"><img src="./image/3.jpg" alt=""></a>
  78.                 </div>
  79.                 <div class="item">
  80.                     <a href="###"><img src="./image/4.jpg" alt=""></a>
  81.                 </div>
  82.             </div>   
  83.         </div>
  84.  
  85.         <script>  
  86.              // 1、获取相应的元素
  87.                let list = document.querySelectorAll('.tab .tab-item')
  88.                let items = document.querySelectorAll('.box-middle .item')
  89.                // 2、用for循环为tab栏所有元素添加点击事件 头部tab栏切换模块(排他思想)
  90.                for (let i = 0; i < list.length; i++){
  91.                      list[i].addEventListener('click',function(){
  92.                         document.querySelector('.tab .active').classList.remove('active')
  93.                         this.classList.add('active')
  94.                 // 3、底部显示隐藏模块 要放在点击事件的里边
  95.                         // 3.1、先移除
  96.                      document.querySelector('.box-middle .active').classList.remove('active')
  97.                        // 3.2 点击哪个按钮就显示对应的底部模块
  98.                        items[i].classList.add('active')  // 中间模块展示图片和上面的选项栏一一对应
  99.                      })
  100.                }
  101.         </script>
  102.     </body>
  103. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/69407
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号