HTML+CSS 开发简单组件(五)

最新推荐文章于 2024-04-05 15:10:07 发布

易萌教主

最新推荐文章于 2024-04-05 15:10:07 发布

阅读量111

点赞数

分类专栏：原生组件开发文章标签： css html js

本文链接：https://blog.csdn.net/tian_yanT/article/details/118686173

版权

原生组件开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML+CSS 开发简单组件(五)

仿制选项卡

废话不说，直接上代码

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡制作</title>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<div class="box">
			<!-- 定义一个包围盒 -->
			<div class="tab-list">
				<!-- 定义一个选项卡标签选项框 -->
				<ul>
					<!-- 通过一个无序列表实现 -->
					<li class="active"><span class="title">标题1</span></li>
					<li><span class="title">标题2</span></li>
					<li><span class="title">标题3</span></li>
					<!-- 三个li就是三个选项 -->
				</ul>
			</div>
			<div class="panel-list">
				<!-- 定义一个选项卡面板包围盒 -->
				<div class="panel-box">
					<!-- 定义一个面板包围盒 -->
					<div class="panel">面板1</div>
					<div class="panel">面板2</div>
					<div class="panel">面板3</div>
					<!-- 三个面板，面板数量要与标签相对应 -->
				</div>
			</div>
		</div>
	</body>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
</html>

css部分

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: "ms sans serif";
	/* 设定基础样式 */
}
ul>li{
	list-style: none;
	/* 设定列表表项没有前面的小圆点 */
}
body{
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 设定尺寸,使用flex布局,水平垂直居中 */
}
.box{
	width: 800px;
	height: 480px;
	/* 设定尺寸 */
	box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
	/* 设置阴影 */
	border-radius: 12px;
	/* 设定一个圆角 */
	overflow: hidden;
	/* 超出隐藏 */
}
.tab-list{
	width: 100%;
	height: 60px;
	/* 定义尺寸 */
	padding: 0 24px;
	/* 定义内边距 */
	background-color: #ADADAD;
	/* 定义背景颜色 */
}
.tab-list>ul{
	width: 100%;
	height: 100%;
	/* 定义尺寸 */
	display: flex;
	align-items: center;
	/* 定义flex布局,垂直居中 */
}
.tab-list>ul>li{
	width: 108px;
	height: calc(100% - 20px);
	/* 定义尺寸 */
	margin-right: 12px;
	/* 定义向右的外边距 */
	background-color: rgba(255,255,255,.25);
	border-radius: 8px;
	/* 定义背景和圆角 */
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* 定义flex布局,垂直居中,水平居左 */
	box-shadow: inset 0 0 6px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.3);
	/* 定义阴影 */
	padding: 0 6px;
	/* 定义内边距 */
	cursor: pointer;
	/* 鼠标设置手型 */
}
.tab-list>ul>li.active{
	background-color: #1890FF;
}
.tab-list>ul>li:hover{
	background-color: #A7AAB5;
}
.tab-list>ul>li.active:hover{
	background-color: #1890FF;
}
.tab-list>ul>li>span.title{
	color: #2f5f8f;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
}
.tab-list>ul>li.active>span.title{
	color: #F0F0F0;
}
.panel-list{
	width: 100%;
	height: calc(100% - 60px);
	position: relative;
}
.panel-box{
	width: 300%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
}
.panel{
	width: calc(100% / 3);
	height: 100%;
}

js部分

(doc => {
	const tags = doc.querySelectorAll("span.title");
	const panelBox = doc.querySelector(".panel-box");
	const panel = doc.querySelector(".panel");
	// 获取元素
	tags.forEach((item, index) => {
		// 遍历元素
		item.addEventListener("click", e => {
			tags.forEach(tag => {
				if (tag.parentNode.className.indexOf("active") !== -1) {
					tag.parentNode.classList.remove("active");
				}
			});
			item.parentNode.classList.add("active");
			panelBox.style["left"] = -index * panel.clientWidth + "px";
		});
	});
})(document);

效果图

在这里插入图片描述

易萌教主

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 开发简单组件(五)

HTML+CSS 开发简单组件(五)仿制选项卡废话不说，直接上代码html部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡制作</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body>
复制链接

扫一扫