tab切换 css3方法实现

最新推荐文章于 2022-09-09 09:25:37 发布

S_1978P1

最新推荐文章于 2022-09-09 09:25:37 发布

阅读量349

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/S_1978P1/article/details/82348200

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab切换-target伪类</title>
		<style type="text/css">
			#container{
				width: 200px;
				height: 150px;
				border: 1px solid #000;
			}
			#container div{
				display: none;
			}
			#container div:target{
				display: block;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#div01">HTML</a>
			<a href="#div02">CSS</a>
			<a href="#div03">JAVASCRIPT</a>
		</div>
		<div id="container">
			<div id="div01">承载内容</div>
			<div id="div02">修饰样式</div>
			<div id="div03">网页特效</div>
		</div>
	</body>
</html>