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