---

原生

效果图

---

---

html
代码

<div class="card">
    <div class="tab_bar">
        <div class="item" onclick="handleTabBar(this)">tabBar1</div>
        <div class="item" onclick="handleTabBar(this)">tabBar2</div>
        <div class="item" onclick="handleTabBar(this)">tabBar3</div>
    </div>

    <div class="content">
        <div class="item">
            <h2>Tab1</h2>
            <p>Content for Tab 1.</p>
        </div>
        <div class="item">
            <h2>Tab2</h2>
            <p>Content for Tab 2.</p>
        </div>
        <div class="item">
            <h2>Tab3</h2>
            <p>Content for Tab 3.</p>
        </div>
    </div>
</div>

---

解析

1、整个代码块的外层是一个<div>标签，类名为card，表示这是一个卡片样式的容器。
2、tab_bar部分包含三个div元素，每个div元素都具有item类，并且每个div元素有一个onclick事件，当用户点击时，会调用handleTabBar(this)函数。
2.1、tabBar1、tabBar2和tabBar3是三个不同的标签，每个标签都会显示不同的内容。
3、content部分也包含了三个div元素，每个div元素都具有item类，对应不同的标签页内容。

---

style
代码

.card {
    padding: 8px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0px 0px 2px 2px #fafad2;
    border-radius: 4px;

    .tab_bar {
        display: flex;
        padding-bottom: 8px;
        box-sizing: border-box;
        border-bottom: 1px solid #e1e1e1;

        .item {
            padding: 4px 8px;
            box-sizing: border-box;
            cursor: pointer;
        }

        .item:not(:first-child) {
            margin-left: 6px;
        }

        .active {
            position: relative;
            color: #409eff;
            transition: color 0.3s ease;
        }

        .active::after {
            content: '';
            position: absolute;
            width: 68%;
            height: 3px;
            left: 50%;
            bottom: -2px;
            transform: translateX(-50%);
            background-color: #409eff;
            border-radius: 2px;
        }
    }

    .content {
        margin-top: 8px;

        .item {
            display: none;

            h2 {
                margin: 0;
            }

            p {
                margin: 0;
                margin-top: 4px;
            }
        }
    }
}

---

解析

1、.card定义卡片的基本样式，包括内边距、背景色、阴影效果和边框圆角。
2、.tab_bar是标签栏的样式，使用display: flex;使其成为一个水平排列的布局。每个.item元素有内边距，并且设置鼠标悬停时的样式cursor: pointer;表明它是可点击的。
3、.item:not(:first-child)定义非第一个item的左边距，使其与前一个元素有一定的间隔。
4、.active类表示当前激活的标签，改变文字颜色，并添加一个下划线，表示当前激活的状态。
5、.content .item隐藏所有内容，除非被激活。

---

JavaScript
代码

runInit();

function handleTabBar(e) {
    const itemElTabBar = document.querySelectorAll('.tab_bar .item');
    const itemElContent = document.querySelectorAll('.content .item');

    itemElTabBar.forEach((item, i) => {
        if (item === e) {
            e.classList.add('active');
            itemElContent[i].style.display = 'block';
        } else {
            item.classList.remove('active');
            itemElContent[i].style.display = 'none';
        }
    });
}

function runInit() {
    const itemElTabBar = document.querySelectorAll('.tab_bar .item');
    const itemElContent = document.querySelectorAll('.content .item');

    itemElTabBar[0].classList.add('active');
    itemElContent[0].style.display = 'block';
}

---

解析

1、runInit()函数在页面加载时立即运行，初始化第一个标签页，使其显示为激活状态。
2、handleTabBar(e)函数在用户点击任意一个标签时触发。
2.1、itemElTabBar和itemElContent分别获取.tab_bar和.content下的所有item元素。
2.2、遍历所有的item元素，检查当前点击的item是否与遍历中的item相同。
2.2.1、如果是相同的，将其设置为激活状态(添加active类)，并显示对应的内容。
2.2.2、如果不是相同的，则移除active类，并隐藏对应的内容。

---

vue

html

<div class="tab_bar">
  <div
    :class="{
      item: true,
      active: item.id === activeTabBar ? true : false
    }"
    v-for="item in tabBarList"
    :key="item.id"
    @click="handleTabBar(item)"
  >
    {{ item.title }}
  </div>
</div>

---

style

.tab_bar {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #a8a8a8;

  .item {
    position: relative;
    padding: 8px;
    cursor: pointer;
  }

  .item:not(:first-child) {
    margin-left: 8px;
  }

  .active {
    position: relative;
    color: #409eff;
    transition: color 0.5s ease;
  }

  .active::after {
    content: '';
    position: absolute;
    width: 58%;
    height: 3px;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    background-color: #409eff;
  }
}

---

JavaScript

export default {
  name: 'tabBar',
  data() {
    return {
      activeTabBar: 1,
      tabBarList: [
        { id: 1, title: '正在开班' },
        { id: 2, title: '已结束班级' },
        { id: 3, title: '全部班级' }
      ]
    };
  },
  methods: {
    handleTabBar(row = {}) {
      this.activeTabBar = row.id;
    }
  }
};