使用 :checked 实现
原理：
- 默认隐藏 checkbox
- 点击 label 时会切换 checkbox 的选中状态
- 使用伪元素选择器
:checked和 后代选择器~实现内容和按钮的显示隐藏
<!DOCTYPE html> <html> <head> <title>checkbox控制显示隐藏</title> </head> <body> <input id="myCheckbox" type="checkbox" /> <div class="Btn show"> <label for="myCheckbox">显示</label> </div> <div class="Btn hide"> <label for="myCheckbox">隐藏</label> </div> <div class="content">内容</div> <style> .Btn { width: 60px; text-align: center; border: solid 1px black; padding: 4px; border-radius: 4px; } label { display: block; width: 100%; cursor: pointer; } #myCheckbox { display: none; } .content { display: none; } .hide { display: none; } #myCheckbox:checked ~ .content { display: block; } #myCheckbox:checked ~ .hide { display: block; } #myCheckbox:checked ~ .show { display: none; } </style> </body> </html>
使用 :target 实现
可模拟 tab 页签切换效果
原理：
- 使用锚点链接在 url 后加 #id 来触发 :target
- 针对 :target 的元素添加显示效果
<!DOCTYPE html> <html> <head> <title>:target模拟页签切换</title> </head> <body> <a class="tabBtn" href="#p1">第1页</a> <a href="#p2">第2页</a> <a href="#p3">第3页</a> <div class="content" id="p1">第1页的内容</div> <div class="content" id="p2">第2页的内容</div> <div class="content" id="p3">第3页的内容</div> <style> .content { display: none; } #p1:target { display: block; } #p2:target { display: block; } #p3:target { display: block; } </style> </body> </html>
