用css写选项卡

最新推荐文章于 2023-04-12 22:26:15 发布

tiantiandashi

最新推荐文章于 2023-04-12 22:26:15 发布

阅读量489

点赞数

分类专栏：杂七杂八

本文链接：https://blog.csdn.net/tiantiandashi/article/details/81060542

版权

杂七杂八专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style> 


.tabs {
	width:100%;
	/*border:1px solid;*/
	text-align: center;
}
.tabs>div{
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box; 
	width:50%;
	/*border:1px solid red;*/
	float:left;
}


  *{
		margin:0;
		padding:0;
		list-style:none;
		box-sizing:border-box;
	}
	body{
		padding:20px;
	}

	.tabs input[type=radio]{/*隐藏单选框的样式*/
		position:absolute;
		top:-9999px;
		left:-9999px;
	}
	.tabs label{
		margin: 0 auto;
		display:block;
		/*border:1px solid #000;*/
		padding:10px;
		text-align:center;
		/*border-radius:6px 6px 0 0 ;*/
		background:#aaf;
		width:140px;
		position:relative;
		top:4px;
		z-index:3;
		transition:all 0.2s ease-in-out;
 
	}
	.tabs label:hover{
		background:#bbf;
	}
	
	

	.tabs .tab_content{
		width:96%;
		background:#faf;
		height:200px;
		position:absolute;
		top:80px;
		left:0px;
		z-index:2;
		border-top:1px solid #000;
		/*padding:10px;*/
		margin: 0 20px;
		display:none;
	}
	.tabs input[type=radio]:checked + label{
		/*top:0px;*/
		/*padding-top:14px;*/
		border-bottom:1px solid green;
		background:#faf;
	}
	.tabs input[type=radio]:checked ~ div[id^=tab_content]{
		display:block;
	}

</style>
</head>
<body>

	
	<div class="tabs">
		<div>
			<input type="radio" name="tabs" id="tab1" checked/>
			<label for="tab1">选择卡1</label>
			<div class="tab_content" id="tab_content1">
				<p>选项卡1的内容</p>
			</div>
		</div>
		<div>
			<input type="radio" name="tabs" id="tab2"/>
			<label for="tab2">选择卡2</label>
			<div class="tab_content" id="tab_content2">
				<p>选项卡2的内容</p>
			</div>
		</div>
	</div>
<!--</div>-->

</body>
</html>