HTML 导航栏标签切换

最新推荐文章于 2024-06-18 11:32:20 发布

清静清源

最新推荐文章于 2024-06-18 11:32:20 发布

阅读量4.2k

点赞数 1

分类专栏： javascript Web 前端基础

本文链接：https://blog.csdn.net/qq_35068659/article/details/110949000

版权

本文介绍了如何使用HTML和JavaScript实现导航栏中的标签切换效果。通过HTML定义导航结构，配合JavaScript实现不同标签内容的动态显示。

摘要由CSDN通过智能技术生成

html code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.tab-box {
				border: 2px solid greenyellow;
			}
			/* display: flex弹性盒子，水平方向*/
			.tab-head {
				display: flex;
			}
			/* flex-grow生长为100%*/
			.tab-head-div {
				flex-grow: 1;
				text-align: center;
				background: green;
				border-right: 1px solid white;
				line-height: 40px;
			}
			.tab-head-div.current {
				background: wheat;
			}
			.tab-body-div {
				display: none;
			}
			.tab-body-div.current {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tab-box">
			<div class="tab-head">
				<div class="tab-head-div current" onclick="selectTab(0)">标签一</div>
				<div class="tab-head-div" onclick="selectTab(1)">标签二</div>
				<div class&