21.tab切换（CSS可见性）

最新推荐文章于 2026-01-07 10:39:32 发布

原创最新推荐文章于 2026-01-07 10:39:32 发布 · 314 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Div+Css

当前文章被收录于：

Div+Css

22 篇文章 2 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种仅使用HTML和CSS实现标签页切换的方法，通过设置不同的div元素背景色来展示不同的内容区域，并利用锚点结合overflow属性完成平滑切换效果。

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab切换</title>
		<style type="text/css">
			.box,.div1,.div2,.div3{
				width:300px;
				height:300px;
			}
			.box{
				overflow: hidden;
			}
			.div1{
				background:red;
			}
			.div2{
				background:black;
			}
			.div3{
				background:green;
			}
		</style>
	</head>
	<body>
			<div class="link">
				<!--用锚点的方式解决，用overflow:hidden隐藏多余的内容-->
				<a href="#div1">div1</a>
				<a href="#div2">div2</a>
				<a href="#div3">div3</a>
			</div>
		<div class="box">
			<div class="div1" id="div1"></div>
			<div class="div2" id="div2"></div>
			<div class="div3" id="div3"></div>
		</div>
	</body>
</html>