web前端之选项卡的实现、动态添加类名、动态移除类名、动态添加样式、激活、间距、节流、tabBar
MENU
- 原生(一)
- 原生(二)
- vue(一)
原生(一)
效果图
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类，并隐藏对应的内容。
原生(二)
效果图
概述
代码段实现一个简单的图片展示和切换功能，用户可以通过点击下方的缩略图来更改上方的大图显示。代码主要由HTML结构、CSS样式和JavaScript交互逻辑组成。
html
<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>
1、
<div class="box">是整个组件的容器，包含大图显示区域和缩略图列表。
2、<div class="back_img"></div>用于显示大图的区域，初始状态下没有内容，背景图像会通过CSS设置。
3、<ul class="list">是缩略图列表，包含多个缩略图供用户选择。
3.1、<li class="item">列表项，每个项包含一张缩略图。
3.2、<img>实际的缩略图图片。
3.3、第一张图片具有class="active"类，表示默认选中的状态，对应显示在大图区域。
HTML结构简单明了，清晰地分隔大图显示区域和缩略图列表，方便后续样式和交互的实现。
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);}}}} }
全局样式*
1、margin: 0px;和padding: 0px;清除所有元素的默认外边距和内边距，保证样式的一致性。
2、box-sizing: border-box;设置盒模型计算方式，元素的宽高包括内边距和边框，方便尺寸控制。
body样式
1、width: 100vw;和height: 100vh;设置视口宽高为 100%，充满整个浏览器窗口。
2、display: flex;使用Flexbox布局。
3、justify-content: center;和align-items: center;将内容在水平方向和垂直方向居中对齐。
4、background: linear-gradient(to bottom, pink, skyblue);设置从上到下的线性渐变背景色，颜色从粉色过渡到天蓝色。
.box容器样式
1、width: 680px;设置容器的宽度。
.back_img
1、height: 500px;设置高度。
2、background-image: url('../../image/2_.jpg');设置初始背景图像，与第一张缩略图对应。
3、background-repeat: no-repeat;防止背景图像重复。
4、background-size: 100% 100%;让背景图像充满整个容器并拉伸到容器尺寸。
5、box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1);添加橙色的外阴影，增加层次感。
6、border-radius: 4px;设置圆角，增加柔和感。
7、transition: all 1s;添加过渡效果，使背景图像更换时有平滑的过渡。
.list
1、display: flex;使用Flexbox布局。
2、justify-content: space-between;在主轴(水平)方向上均匀分布子元素。
3、align-items: center;在交叉轴(垂直)方向上居中对齐。
4、margin-top: 18px在顶部添加间距，与大图区域分隔开。
5、list-style: none;去除列表默认样式。
6、gap: 16px;设置子元素之间的间距。
.item
1、flex: 1;每个缩略图项平均分配剩余空间，保证等宽。
2、height: 118px;设置高度。
img
1、width: 100%;和height: 100%;让图片充满父容器。
2、box-shadow: 0px 0px 1px 2px rgba(68, 68, 68, 0.4);添加灰色的外阴影。
3、border-radius: 4px;设置圆角。
4、cursor: pointer;当鼠标悬停时显示指针，提示可点击。
img.active
1、box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1);为选中的缩略图添加橙色的外阴影，突出显示。
CSS样式通过精心设计，实现良好的布局和视觉效果，但需要注意的是，嵌套语法需要借助Sass等CSS预处理器进行编译。如果在浏览器中直接使用，需要将嵌套的样式展开为标准的CSS语法。
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);}};}); }
1、
runInit();调用初始化函数，开始执行交互逻辑。
2、function runInit() { ... }定义初始化函数。
2.1、const backImg = document.querySelector('.back_img');获取大图显示区域的DOM元素，方便后续修改其背景图像。
2.2、const elList = document.querySelectorAll('.item > img');获取所有缩略图图片的DOM元素集合，便于为每个缩略图添加点击事件。
2.3、let isClick = true;定义一个布尔值变量，用于控制点击节奏，防止过于频繁的点击操作。
3、为每个缩略图添加点击事件监听器。
3.1、elList.forEach(item => { ... });遍历每个缩略图元素，为其添加点击事件。
3.2、item.onclick = ({ target }) => { ... };当缩略图被点击时触发的事件处理函数。
3.3、if (isClick) { ... }检查isClick是否为true，防止在短时间内多次触发点击事件。
3.4、backImg.style.backgroundImage = 'url(' + target.src + ');'将大图区域的背景图像设置为被点击的缩略图的src，实现大图切换。
3.5、elList.forEach(items => items.classList.remove('active'));移除所有缩略图的active类名，取消选中状态。
3.6、target.classList.add('active');为当前被点击的缩略图添加active类名，突出显示选中状态。
3.7、isClick = false;将isClick设置为false，防止在短时间内再次触发点击事件。
3.8、setTimeout(() => isClick = true, 1000 * 1);
3.8.1、使用setTimeout在1秒后将isClick重置为true，允许再次点击。
3.8.2、这种方式实现简单的节流效果，防止用户过于频繁地切换图片。
JavaScript部分通过简单的事件监听和DOM操作，实现点击缩略图更换大图的交互效果。同时，使用一个简单的节流机制，避免过于频繁的点击操作导致的潜在问题。
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;}}
};