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

相关阅读:
DSA之排序（3）：交换排序，简单选择排序，归并排序，基数排序
强网杯2022 pwn 赛题解析——house_of_cat
Apifox : 不仅是Api调试工具，更是开发团队的协作神器
数据中台：数据治理概述
背会了常见的几个线程池用法，结果被问翻了
ssl 层在握手阶段报错 mbedtls_ssl_handshake returned -0xffff8880
web网页设计期末课程大作业：旅游网页主题网站设计——中国风的温泉酒店预订网(13页)HTML+CSS+JavaScript
双坐标轴柱状图
【系统架构设计】架构核心知识： 3.6 负载均衡和Session
2023腾讯云服务器优惠价格表_10月更新报价

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