利用input和伪类来进行标签的显示和隐藏

最新推荐文章于 2023-07-13 20:19:13 发布

weixin_34199405

最新推荐文章于 2023-07-13 20:19:13 发布

阅读量808

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b7ff3c9e51d4538d0419b4b

版权

Checkbox来储存状态

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
	.txt{padding: 20px;}
	#myCheck{display: none;}
	.menu{cursor: pointer;}
	.tt{display: none;width: 300px;min-height: 100px;background-color: #ccc;padding: 20px;}
	#myCheck:checked ~ .tt{display: block;}
</style>
</head>
<body>
<label for="myCheck" class="menu">菜单</label>
<input id="myCheck" type="checkbox" name="">
<div class="txt">
	<p>利用Checkbox来储存状态 </p>
	<p>#myCheck:checked ~ .tt  // ~ 记得要加</p>
</div>
<div class='tt'>内容</div>
</body>
</html>
复制代码