源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 4597|回复: 0

[CSS/Html] JS基础案例-tab栏切换(附详细代码)

[复制链接]

3095

主题

3493

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
266463
发表于 2023-2-2 18:34:53 | 显示全部楼层 |阅读模式

今天做了一个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.             .box-middle .item.active {
  52.                 display: block;
  53.             }
  54.         </style>
  55.     </head>
  56.    
  57.     <body>
  58.         <div class="box">
  59.             <div class="box-top">
  60.                 <ul class="tab">
  61.                     <li class="tab-item active">第一张</li>
  62.                     <li class="tab-item">第二张</li>
  63.                     <li class="tab-item">第三张</li>
  64.                     <li class="tab-item">第四张</li>
  65.                 </ul>
  66.             </div>

  67.             <div class="box-middle">
  68.                 <div class="item active"> //默认展示页面
  69.                    <a href="###"><img src="./image/1.jpg" alt=""></a>
  70.                 </div>
  71.                 <div class="item">
  72.                     <a href="###"><img src="./image/2.jpg" alt=""></a>
  73.                 </div>
  74.                 <div class="item">
  75.                     <a href="###"><img src="./image/3.jpg" alt=""></a>
  76.                 </div>
  77.                 <div class="item">
  78.                     <a href="###"><img src="./image/4.jpg" alt=""></a>
  79.                 </div>
  80.             </div>   
  81.         </div>

  82.         <script>  
  83.              // 1、获取相应的元素
  84.                let list = document.querySelectorAll('.tab .tab-item')
  85.                let items = document.querySelectorAll('.box-middle .item')
  86.                // 2、用for循环为tab栏所有元素添加点击事件 头部tab栏切换模块(排他思想)
  87.                for (let i = 0; i < list.length; i++){
  88.                      list[i].addEventListener('click',function(){
  89.                         document.querySelector('.tab .active').classList.remove('active')
  90.                         this.classList.add('active')
  91.                 // 3、底部显示隐藏模块 要放在点击事件的里边
  92.                         // 3.1、先移除
  93.                      document.querySelector('.box-middle .active').classList.remove('active')
  94.                        // 3.2 点击哪个按钮就显示对应的底部模块
  95.                        items[i].classList.add('active')  // 中间模块展示图片和上面的选项栏一一对应
  96.                      })
  97.                }
  98.         </script>
  99.     </body>
  100. </html>
复制代码
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-14 03:12 , Processed in 0.028773 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明