纯css实现选项卡效果

最新推荐文章于 2024-08-26 12:07:23 发布

漠河愁

最新推荐文章于 2024-08-26 12:07:23 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/lwaner/article/details/100172391

版权

用css实现选项卡效果，需要用到label标签，label标签不会呈现任何效果，当点击label时，浏览器会自动将焦点转到和标签相关的表单控件上。
标签的for属性相当于其他元素的id属性，checked.checked 属性规定在页面加载时应该被预先选定的input元素。

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>css实现选项卡</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			form {
				width: 600px;
				height: 460px;
				background: #33344a;
				margin: 200px auto;
				border: 1px solid green;
				padding: 10px;
			}
			
			input {
				display: none;
			}
			
			input+i {
				font-style: normal;
				width: 100px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				display: inline-block;
				color: antiquewhite;
			}
			
			input:checked+i {
				background: #e74c3c;
				color: lawngreen;
			}
			
			input+i+span {
				display: none;
			}
			
			input:checked+i+span {
				width: 600px;
				height: 400px;
				display: block;
				background: white;
				position: absolute;
			
			}
		</style>
	</head>

	<body>
		<form>
			<label><input type="radio" name="nn" checked="checked"><i>WEB</i><span>讲师：旺旺</span></label>
			<label><input type="radio" name="nn"><i>UI</i><span>讲师：辉哥</span></label>
			<label><input type="radio" name="nn"><i>PHP</i><span>讲师：晴姐</span></label>
			<label><input type="radio" name="nn"><i>英才</i><span>大虎</span></label>
		</form>
	</body>

以上代码为整体格式，如有建议请联系小编。