选项卡模板

最新推荐文章于 2024-05-15 02:20:32 发布

最帅程序员

最新推荐文章于 2024-05-15 02:20:32 发布

阅读量399

点赞数

本文链接：https://blog.csdn.net/weixin_40222803/article/details/78060030

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		li{list-style: none;}
		li{float: left;}
		div{visibility: hidden;}
		input:checked + label{color:red;}
		input:checked ~ div{visibility: visible;}
	</style>
</head>
<body>
	<ul>
		<li>
			<input id="a1"  type="radio" name="1" checked="checked">
			<label for="a1">选项卡1</label>
			<div  class="div1">选项卡1</div>
		</li>
		<li>
			<input id="a2"  type="radio" name="1">
			<label for="a2">选项卡2</label>
			<div  class="div2">选项卡2</div>
		</li>
		<li>
			<input id="a3"  type="radio" name="1">
			<label for="a3">选项卡3</label>
			<div  class="div3">选项卡3</div>
		</li>
		<li>
			<input id="a4"  type="radio" name="1">
			<label for="a4">选项卡4</label>
			<div  class="div4">选项卡4</div>
		</li>
	</ul>
</body>
</html>