html+css+JavaScript实现tab栏切换

牙通牙通牙牙牙

已于 2023-08-03 23:32:42 修改

阅读量638

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2023-08-03 21:51:46 首次发布

本文链接：https://blog.csdn.net/weixin_44344709/article/details/132093139

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

鼠标点击tab栏切换
实现效果：鼠标点击后改变文字样式，并且切换相应内容。
使用事件委托的方式实现tab栏切换，不需要写for循环对每一个子元素注册事件，可以提高性能。

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 300px;
      height: 200px;
      background-color: white;
      margin: 100px auto;
    }

    .container .up {
      height: 50px;
      width: 100%;
    }

    .container .up ul {
      list-style-type: none;
      text-align: center;
    }

    .container .up ul li {
      float: left;
      width: 100px;
      height: 50px;
      line-height: 50px;
      /* 这里 line-height == 父容器高度 ，能起到上下居中的效果*/
    }

    /*设置li标签的文字以及下划线高亮效果： */
    .select {
      color: #1677ff;
      border-bottom: 2px solid #1677ff;
    }

    .container .down {
      width: 100%;
      height: 100px;
      position: relative;
      text-align: center;
    }

    .container .down div {
      position: absolute;
      line-height: 100px;
      height: 100%;
      width: 100%;
      display: none;
      /*将所有盒子都不显示，后面通过指定class显示被选中的盒子 */
    }

    .container .down .div_select {
      display: block;
    }
  </style>

<body>
  <!-- 大盒子 -->
  <div class="container">
    <!-- 上部分的小盒子 -->
    <div class="up">
      <ul>
        <!-- 为每个小li添加一个自定义属性，方便与下面相应的小盒子一一对应 -->
        <li class="select" data-id="0">Tab1</li>
        <li data-id="1">Tab2</li>
        <li data-id="2">Tab3</li>
      </ul>
    </div>
    <!-- 下部分的小盒子 -->
    <div class="down">
      <div class="div_select">coantain of Tab1</div>
      <div>coantain of Tab2</div>
      <div>coantain of Tab3</div>
    </div>
  </div>

  <script>
    // 1.获取上面tab栏的父盒子和下部分的3个小盒子
    const ul = document.querySelector('.up ul')
    const divs = document.querySelectorAll('.down div')
    // console.log(ul);
    // 2.在父盒子上绑定事件。利用事件冒泡，当鼠标点击里面的小li时，会冒泡到父元素的身上，触发事件
    ul.addEventListener('click', function (e) {
      // 3.利用排他思想，将所有小li的选中效果清除
      document.querySelector('.up .select').classList.remove('select')
      // 4.为选中的小li添加select类
      e.target.classList.add('select')

      // 5.利用排他思想，将所有小盒子的显示效果清除
      document.querySelector('.down .div_select').classList.remove('div_select')
      // 6.将选中的小li对应的小盒子显示出来
      divs[e.target.dataset.id].classList.add('div_select')
    })
  </script>
</body>