【css常用布局】tab切换效果（小白向）

说明

本次点击切换的效果需要配合简单的javascript逻辑

效果展示

实现原理

HTML部分：

<div class="wrap">
    <div class="tab_wrap">
		<div class="tab_active"> <!-- 被点击按钮 -->
			<div class="tab_text">首页</div>
		</div>
		<div class="tab_no_active"> <!-- 未点击按钮 -->
			<div class="tab_text">手机商城</div>
		</div>
		<div class="tab_no_active"> <!-- 未点击按钮 -->
			<div class="tab_text">小米</div>
		</div>
	</div>
</div>

CSS部分：

.wrap {  // 这个只是用来居中例子中的显示内容
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 8px;
}

.tab_wrap {
	align-items: center;
	display: flex;
	justify-content: center;
}

.tab_active { // 被点击的tab按钮的类样式
	border-width: 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) transparent;  // 下边框为透明
	border-image: initial;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	cursor: pointer;
	padding: 16px;
}

.tab_no_active { // 未被点击的tab按钮的类样式
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	cursor: pointer;
	padding: 16px;
}

.tab_text {
	font-size: 12px;
}

JS部分：

let tabWrapObj = document.getElementsByClassName('tab_wrap')[0] 
let tabListObj = tabWrapObj.children  // 首先获取每个tab按钮的dom对象集合
for (let i = 0; i < tabListObj.length; i++) {  // 循环，给每个tab按钮都挂上一个点击事件
	tabListObj[i].onclick = function() {
		for (let j = 0; j < tabListObj.length; j++) {  // 先循环把每个tab按钮都清理为未点击的效果
			tabListObj[j].className = 'tab_no_active'
		}
		tabListObj[i].className = 'tab_active' // 然后再给被点击的tab按钮附上点击效果的类名
	}
}

完~