使用 :checked 实现
原理&＃xff1a;
- 默认隐藏 checkbox
- 点击 label 时会切换 checkbox 的选中状态
- 使用伪元素选择器
:checked 和 后代选择器 ~ 实现内容和按钮的显示隐藏
DOCTYPE html>
<html><head><title>checkbox控制显示隐藏title>head><body><input id&＃61;"myCheckbox" type&＃61;"checkbox" /><div class&＃61;"Btn show"><label for&＃61;"myCheckbox">显示label>div><div class&＃61;"Btn hide"><label for&＃61;"myCheckbox">隐藏label>div><div class&＃61;"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 页签切换效果
原理&＃xff1a;
- 使用锚点链接在 url 后加 #id 来触发 :target
- 针对 :target 的元素添加显示效果
DOCTYPE html>
<html><head><title>:target模拟页签切换title>head><body><a class&＃61;"tabBtn" href&＃61;"#p1">第1页a><a href&＃61;"#p2">第2页a><a href&＃61;"#p3">第3页a><div class&＃61;"content" id&＃61;"p1">第1页的内容div><div class&＃61;"content" id&＃61;"p2">第2页的内容div><div class&＃61;"content" id&＃61;"p3">第3页的内容div><style>.content {display: none;}#p1:target {display: block;}#p2:target {display: block;}#p3:target {display: block;}style>body>
html>
京公网安备 11010802041100号