web前端之选项卡的实现、动态添加类名、动态移除类名、动态添加样式、激活、间距、tabBar

---

原生(一)

效果图

---

---

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类，并隐藏对应的内容。

---

原生(二)

效果图

---

---

---

---

heml

<div class="box"><div class="back_img"></div><ul class="list"><li class="item"><img class="active" src="../../image/2_.jpg" alt=""></li><li class="item"><img src="../../image/5_.jpg" alt=""></li><li class="item"><img src="../../image/10_.jpg" alt=""></li><li class="item"><img src="../../image/3_.jpg" alt=""></li><li class="item"><img src="../../image/1_.jpg" alt=""></li></ul>
</div>

---

style

* {margin: 0px;padding: 0px;box-sizing: border-box;
}body {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;background: linear-gradient(to bottom, pink, skyblue);.box {width: 680px;.back_img {height: 500px;background-image: url('../../image/2_.jpg');background-repeat: no-repeat;background-size: 100% 100%;box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1);border-radius: 4px;transition: all 1s;}.list {width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 18px;list-style: none;gap: 16px;.item {flex: 1;height: 118px;img {width: 100%;height: 100%;box-shadow: 0px 0px 1px 2px rgba(68, 68, 68, 0.4);border-radius: 4px;cursor: pointer;}img.active {box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1);}}}}
}

---

JavaScript

runInit();function runInit() {const backImg = document.querySelector('.back_img');const elList = document.querySelectorAll('.item > img');let isClick = true;elList.forEach(item => {item.onclick = ({ target }) => {if (isClick) {backImg.style.backgroundImage = `url(${target.src})`;elList.forEach(items => items.classList.remove('active'));target.classList.add('active');isClick = false;setTimeout(() => isClick = true, 1000 * 1);}};});
}

---

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;}}
};