CSS 实现动态显示隐藏（:checked 和 :target 的妙用）

使用 :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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

使用 :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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

相关阅读:
nginx下载安装和日志切割
有什么软件可以提升视频画质，将模糊视频修复清晰？
dart 学习之命名参数
【前端精进之路】JS篇：第2期数组精讲
C/C++中常用必会的专业单词(持续更新目前53个)
【PHP手麻系统源码】手术麻醉相关的各项数据的记录、管理和应用
代码随想录刷题|LeetCode 198.打家劫舍 213.打家劫舍II 337.打家劫舍III
04 数学软件与建模---Lingo
JS基础学习
【自动驾驶】多传感器感知技术解析

原文地址：https://blog.csdn.net/weixin_41192489/article/details/126267866