• js实现tab栏切换

    目录

    1、排他思想实现

    2、事件委托实现

    1、排他思想实现

    思路：

            需要点击谁，就先获取谁，获得的是一个伪数组

            遍历数组，并给数组里的每个元素添加点击事件，写一个active类用于显示边框样式

            每一个元素对应一张图片，先将所有图片隐藏，并写一个active类用于显示对应图片

            点击时，先清除active类，点击谁，谁就添加active类，对应的图片显示，其他隐藏

            在那之前要先清除active类，那个需要显示就添加active类

    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.       .tab {
    15.         width: 590px;
    16.         height: 340px;
    17.         margin: 20px;
    18.         border: 1px solid #e4e4e4;
    19.       }
    20.  
    21.       .tab-nav {
    22.         width: 100%;
    23.         height: 60px;
    24.         line-height: 60px;
    25.         display: flex;
    26.         justify-content: space-between;
    27.       }
    28.  
    29.       .tab-nav h3 {
    30.         font-size: 24px;
    31.         font-weight: normal;
    32.         margin-left: 20px;
    33.       }
    34.  
    35.       .tab-nav ul {
    36.         list-style: none;
    37.         display: flex;
    38.         justify-content: flex-end;
    39.       }
    40.  
    41.       .tab-nav ul li {
    42.         margin: 0 20px;
    43.         font-size: 14px;
    44.       }
    45.  
    46.       .tab-nav ul li a {
    47.         text-decoration: none;
    48.         border-bottom: 2px solid transparent;
    49.         color: #333;
    50.       }
    51.  
    52.       .tab-nav ul li a.active {
    53.         border-color: #e1251b;
    54.         color: #e1251b;
    55.       }
    56.  
    57.       .tab-content {
    58.         padding: 0 16px;
    59.       }
    60.  
    61.       .tab-content .item {
    62.         display: none;
    63.       }
    64.  
    65.       .tab-content .item.active {
    66.         display: block;
    67.       }
    68.     style>
    69.   head>
    70.  
    71.   <body>
    72.     <div class="tab">
    73.       <div class="tab-nav">
    74.         <h3>每日特价h3>
    75.         <ul>
    76.           <li><a class="active" href="javascript:;">精选a>li>
    77.           <li><a href="javascript:;">美食a>li>
    78.           <li><a href="javascript:;">百货a>li>
    79.           <li><a href="javascript:;">个护a>li>
    80.           <li><a href="javascript:;">预告a>li>
    81.         ul>
    82.       div>
    83.       <div class="tab-content">
    84.         <div class="item active"><img src="./images/tab00.png" alt="" />div>
    85.         <div class="item"><img src="./images/tab01.png" alt="" />div>
    86.         <div class="item"><img src="./images/tab02.png" alt="" />div>
    87.         <div class="item"><img src="./images/tab03.png" alt="" />div>
    88.         <div class="item"><img src="./images/tab04.png" alt="" />div>
    89.       div>
    90.     div>
    91.     <script>
    92.       // 需求 点击tab栏进行对应内容切换
    93.       // 1 获取相关元素
    94.       const lis = document.querySelectorAll('.tab-nav li')
    95.       const divs = document.querySelectorAll('.tab-content  div')
    96.       // 2 循环绑定事件
    97.       for (let i = 0; i < lis.length; i++) {
    98.         lis[i].addEventListener('mouseenter', function () {
    99.           // 2-1 让点击的菜单加active 其他移除
    100.           document.querySelector('.tab-nav a.active').classList.remove('active')
    101.           this.querySelector('a').classList.add('active')
    102.  
    103.           // 2-2 对应的内容显示 其他内容隐藏
    104.           document
    105.             .querySelector('.tab-content div.active')
    106.             .classList.remove('active')
    107.           divs[i].classList.add('active')
    108.         })
    109.       }
    110.     script>
    111.   body>
    112. html>

    2、事件委托实现

    思路：

            由于要添加点击事件的元素有很多，这样需要给每个元素都添加点击事件，比较麻烦。

            我们可以利用事件委托来实现，就是给他们共同的祖先元素绑定事件，其子元素触发的事件就会冒泡到祖先元素，可以提高代码的执行效率，对于其对应内容的显示，在其添加active类时，给每张图片所在的块添加data-id 的属性，在添加类时用e.target.dataset.id作为索引值来添加。

    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.       .tab {
    15.         width: 590px;
    16.         height: 340px;
    17.         margin: 20px;
    18.         border: 1px solid #e4e4e4;
    19.       }
    20.  
    21.       .tab-nav {
    22.         width: 100%;
    23.         height: 60px;
    24.         line-height: 60px;
    25.         display: flex;
    26.         justify-content: space-between;
    27.       }
    28.  
    29.       .tab-nav h3 {
    30.         font-size: 24px;
    31.         font-weight: normal;
    32.         margin-left: 20px;
    33.       }
    34.  
    35.       .tab-nav ul {
    36.         list-style: none;
    37.         display: flex;
    38.         justify-content: flex-end;
    39.       }
    40.  
    41.       .tab-nav ul li {
    42.         margin: 0 20px;
    43.         font-size: 14px;
    44.       }
    45.  
    46.       .tab-nav ul li a {
    47.         text-decoration: none;
    48.         border-bottom: 2px solid transparent;
    49.         color: #333;
    50.       }
    51.  
    52.       .tab-nav ul li a.active {
    53.         border-color: #e1251b;
    54.         color: #e1251b;
    55.       }
    56.  
    57.       .tab-content {
    58.         padding: 0 16px;
    59.       }
    60.  
    61.       .tab-content .item {
    62.         display: none;
    63.       }
    64.  
    65.       .tab-content .item.active {
    66.         display: block;
    67.       }
    68.     style>
    69.   head>
    70.  
    71.   <body>
    72.     <div class="tab">
    73.       <div class="tab-nav">
    74.         <h3>每日特价h3>
    75.         <ul>
    76.           <li><a class="active" href="javascript:;" data-id="0">精选a>li>
    77.           <li><a href="javascript:;" data-id="1">美食a>li>
    78.           <li><a href="javascript:;" data-id="2">百货a>li>
    79.           <li><a href="javascript:;" data-id="3">个护a>li>
    80.           <li><a href="javascript:;" data-id="4">预告a>li>
    81.         ul>
    82.       div>
    83.       <div class="tab-content">
    84.         <div class="item active"><img src="./images/tab00.png" alt="" />div>
    85.         <div class="item"><img src="./images/tab01.png" alt="" />div>
    86.         <div class="item"><img src="./images/tab02.png" alt="" />div>
    87.         <div class="item"><img src="./images/tab03.png" alt="" />div>
    88.         <div class="item"><img src="./images/tab04.png" alt="" />div>
    89.       div>
    90.     div>
    91.     <script>
    92.       // 需求 点击tab栏进行对应内容切换
    93.       // 1 获取相关元素
    94.       const tab_nav = document.querySelector('.tab-nav')
    95.       const divs = document.querySelectorAll('.tab-content  div')
    96.       // 2 绑定事件
    97.       tab_nav.addEventListener('click', function (e) {
    98.         if (e.target.tagName === 'A') {
    99.           // 2-1 让点击的菜单加active 其他移除
    100.           document.querySelector('.tab-nav a.active').classList.remove('active')
    101.           //  console.log(this) // this 永远绑定的事件源 e.target -> 真正触发的元素
    102.           e.target.classList.add('active')
    103.           // 2-2 对应的内容显示 其他内容隐藏
    104.           document
    105.             .querySelector('.tab-content div.active')
    106.             .classList.remove('active')
    107.           divs[e.target.dataset.id].classList.add('active')
    108.         }
    109.       })
    110.     script>
    111.   body>
    112. html>

  • 相关阅读:
    Flink SQL Over 聚合详解
    Mysql底层数据结构为什么选择B+树
    温故而知新：IIR滤波器设计的方法，幅频计算和参数理解
    【C++ 操作符重载：定制自己的运算符行为】
    UE4 WebUI插件使用指南
    winform 获取指定的form
    Java8新特性：stream流应用，丢掉for循环实现复杂遍历功能
    Vue路由与nodejs环境搭建
    R语言逻辑回归、决策树、随机森林、神经网络预测患者心脏病数据混淆矩阵可视化...
    牛客刷题＜32~34＞非整数倍数和整数倍数数据位宽转换
  • 原文地址：https://blog.csdn.net/m0_56713342/article/details/134428091