原生JavaScript实现Tab栏切换案例

最新推荐文章于 2024-05-06 18:26:11 发布

程序员禅心

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量400

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_46219714/article/details/129857906

版权

Tab栏是前端常见的一个业务。下面是基于html+css+javascript的tab栏代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Tab栏切换示例</title>
    <style>
      /* 设置Tab栏容器的样式 */
      .tab-container {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        width: 600px;
        margin: 0 auto;
      }
      /* 设置Tab按钮的样式 */
      .tab-item {
        padding: 10px;
        cursor: pointer;
        font-size: 20px;
        color: #333;
        border-bottom: 2px solid transparent;
        transition: all 0.3s ease-in-out;
      }
      /* 设置当前Tab按钮的样式 */
      .tab-item.active {
        color: #f00;
        border-bottom-color: #f00;
      }
      /* 设置Tab内容容器的样式 */
      .tab-content-container {
        width: 600px;
        margin: 0 auto;
        padding-top: 20px;
      }
      /* 设置Tab内容的样式 */
      .tab-content {
        display: none;
      }
      /* 设置当前Tab内容的样式 */
      .tab-content.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tab-container">
      <!-- Tab按钮 -->
      <div class="tab-item active" data-target="tab1">Tab 1</div>
      <div class="tab-item" data-target="tab2">Tab 2</div>
      <div class="tab-item" data-target="tab3">Tab 3</div>
    </div>
    <div class="tab-content-container">
      <!-- Tab内容 -->
      <div class="tab-content active" data-tab="tab1">这是Tab 1的内容</div>
      <div class="tab-content" data-tab="tab2">这是Tab 2的内容</div>
      <div class="tab-content" data-tab="tab3">这是Tab 3的内容</div>
    </div>
    <script>
      // 获取Tab按钮和Tab内容的容器
      var tabContainer = document.querySelector('.tab-container');
      var tabContentContainer = document.querySelector('.tab-content-container');
      // 获取所有的Tab按钮和Tab内容
      var tabItems = document.querySelectorAll('.tab-item');
      var tabContents = document.querySelectorAll('.tab-content');
      // 遍历所有的Tab按钮
      for (var i = 0; i < tabItems.length; i++) {
        // 给每个Tab按钮添加点击事件
        tabItems[i].addEventListener('click', function () {
          // 获取被点击的Tab按钮的data-target属性值，即对应的Tab内容的data-tab属性值
          var target = this.getAttribute('data-target');
          // 遍历所有的Tab内容，隐藏除了被点击的Tab内容以外的所有内容
          for (var j = 0; j < tabContents.length; j++) {
            if (tabContents[j].getAttribute('data-tab') === target) {
              tabContents[j].classList.add('active');
            } else {
              tabContents[j].classList.remove('active');
            }
          }
          // 遍历所有的Tab按钮，取消除了被点击的Tab按钮以外的所有按钮的active类名
          for (var k = 0; k < tabItems.length; k++) {
            if (tabItems[k] === this) {
              tabItems[k].classList.add('active');
            } else {
              tabItems[k].classList.remove('active');
            }
          }
        });
      }
    </script>
  </body>
</html>

在这里插入图片描述

程序员禅心

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JavaScript实现Tab栏切换案例

/ 获取被点击的Tab按钮的data-target属性值，即对应的Tab内容的data-tab属性值。// 遍历所有的Tab按钮，取消除了被点击的Tab按钮以外的所有按钮的active类名。// 遍历所有的Tab内容，隐藏除了被点击的Tab内容以外的所有内容。// 获取所有的Tab按钮和Tab内容。/* 设置当前Tab按钮的样式 *//* 设置Tab内容容器的样式 *//* 设置当前Tab内容的样式 *//* 设置Tab栏容器的样式 *//* 设置Tab按钮的样式 *//* 设置Tab内容的样式 */
复制链接

扫一扫