当前位置： 首页 > news >正文

HTML5 开关（Toggle Switch）详细讲解

news 2026/5/21 4:44:26

HTML5 开关（Toggle Switch）详细讲解

在这里插入图片描述

1. 任务概述

开关（Toggle Switch）是一种用于表示二元状态（如开/关）的用户界面控件。用户可以通过点击开关来切换状态，常见于设置选项、开关功能等场景。

2. 代码结构

以下是实现开关控件的完整代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>开关控件示例</title><style>/* CSS样式在此 */</style>
</head>
<body><h2>开关（Toggle Switch）示例</h2><label class="toggle-switch"><input type="checkbox" id="toggle"><span class="slider"></span>
</label><script>// JavaScript事件在此
</script></body>
</html>
3. HTML部分
<label class="toggle-switch"><input type="checkbox" id="toggle"><span class="slider"></span>
</label>
  • <label>: 包裹开关控件的标签。点击标签时会触发开关状态的切换。
  • <input type="checkbox">: 这是实际的开关控件，类型为复选框（checkbox）。它的状态（checked或unchecked）表示开关的状态。
  • <span class="slider">: 用于展示开关的外观，通过CSS样式来控制其样式和动画效果。
4. CSS样式
<style>.toggle-switch {position: relative;display: inline-block;width: 60px; /* 开关宽度 */height: 34px; /* 开关高度 */}.toggle-switch input {opacity: 0; /* 隐藏原生复选框 */width: 0; height: 0; }.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc; /* 默认背景色 */transition: .4s; /* 动画效果 */border-radius: 34px; /* 圆角 */}.slider:before {position: absolute;content: "";height: 26px; /* 滑块高度 */width: 26px; /* 滑块宽度 */left: 4px; /* 滑块左侧位置 */bottom: 4px; /* 滑块底部位置 */background-color: white; /* 滑块颜色 */transition: .4s; /* 动画效果 */border-radius: 50%; /* 滑块圆形 */}input:checked + .slider {background-color: #2196F3; /* 开启状态的背景色 */}input:checked + .slider:before {transform: translateX(26px); /* 开启状态滑块移动 */}
</style>
  • .toggle-switch: 设置开关的整体布局，宽度和高度。
  • input: 隐藏原生复选框，使其不可见，但仍能响应点击事件。
  • .slider: 定义开关的外观，包括背景色、圆角和动画效果。
  • .slider:before: 定义滑块的样式和位置。
  • input:checked + .slider: 当复选框被选中时，改变背景色。
  • input:checked + .slider:before: 当复选框被选中时，滑块向右移动。
5. JavaScript部分
<script>const toggle = document.getElementById('toggle');toggle.addEventListener('change', function() {if (this.checked) {console.log('开关已打开'); // 开启状态} else {console.log('开关已关闭'); // 关闭状态}});
</script>
  • 获取元素: 使用document.getElementById获取到复选框元素。
  • 事件监听: 监听复选框的change事件，当状态改变时执行回调函数。
  • 状态判断: 通过this.checked判断当前状态，并在控制台输出相应的信息。
6. 整体效果
  • 用户在网页上可以看到一个开关控件。点击开关时，背景色和滑块位置会发生变化，表示状态的切换。
  • 控制台会输出当前的开关状态（打开或关闭）。

总结

通过以上代码和讲解，你可以实现一个简单而美观的开关（Toggle Switch）控件。这个控件不仅可以用于网页上的设置选项，还可以根据需要进行扩展和美化。

相关文章：

HTML5 开关（Toggle Switch）详细讲解

HTML5 开关&#xff08;Toggle Switch&#xff09;详细讲解 1. 任务概述 开关&#xff08;Toggle Switch&#xff09;是一种用于表示二元状态&#xff08;如开/关&#xff09;的用户界面控件。用户可以通过点击开关来切换状态&#xff0c;常见于设置选项、开关功能等场景。 2…...

编程日记 2025/1/1 14:38:01

win32汇编环境下，双击窗口程序内生成的listview列表控件的某行，并提取其内容的示例程序

;运行效果 ;双击后 ;上源码&#xff0c;仔细研究里面的几条备注就理解原理了 ;提取窗口程序内生成的listview列表控件的内容示例程序 ;抄下面源码&#xff0c;可以在radasm里面直接编译运行。主要的部分加了备注。 ;>>>>>>>>>>>>>>…...

编程日记 2025/1/1 14:37:00

mysql主从断开后问题排查及修复

服务器mysql主从同步断开后&#xff0c;进行主从恢复 问题&#xff1a;mysql的主从断开了&#xff0c;在从服务器上通过以下命令查看状态&#xff0c;发现Slave_SQL_Running为No SHOW SLAVE STATUS\G;Slave_IO_Running&#xff1a;表示从服务器读取主服务器日志的线程 Slave_…...

编程日记 2025/1/1 14:34:57

[2025] 如何在 Windows 计算机上轻松越狱 IOS 设备

笔记 1. 首次启动越狱工具时&#xff0c;会提示您安装驱动程序。单击“是”确认安装&#xff0c;然后再次运行越狱工具。 2. 对于Apple 6s-7P和iPad系列&#xff08;iOS14.4及以上&#xff09;&#xff0c;您应该点击“Optinos”并勾选“允许未经测试的iOS/iPadOS/tvOS版本”&…...

编程日记 2025/1/1 14:33:54

计算机网络—————考研复试

第一章、计算机网络体系结构 1. OSI参考模型和TCP/IP模型&#xff1a; OSI与TCP/IP的记忆方法&#xff1a;只需把OSI的七层记住&#xff0c;将应用层、表示层、会话层一起记&#xff0c;到TCP/IP变成应用层。物理层和数据链路层换成网络接口层。把网络层换个字变成网际层。 而…...

编程日记 2025/1/1 14:32:52

[pdf、epub]260道《软件方法》强化自测题业务建模需求分析共216页（202412更新）

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 260道《软件方法》强化自测题业务建模需求分析共216页&#xff08;202412更新&#xff09; 已上传到本CSDN账号的资源 如果下载不到&#xff0c;也可以访问以下链接&#xff1a; ht…...

编程日记 2025/1/1 14:29:49

LeetCode - 初级算法 数组（只出现一次的数字）

只出现一次的数字 这篇文章讨论如何找到一个数组中只出现一次的数字，确保算法的时间复杂度为线性，且只使用常量额外空间。 免责声明：本文来源于个人知识与公开资料，仅用于学术交流。 描述 给定一个非空整数数组 nums，除了某个元素只出现一次以外，其余每个元素均出现两…...

编程日记 2025/1/1 14:24:44

Android性能优化概述

应用启动速度慢页面加载慢交互卡顿CrashANR 针对这些问题&#xff0c;可以逐一进行优化 1.启动优化 Android应用启动分为冷启动和热启动以及初次安装启动&#xff0c;此处只分析冷启动及热启动 冷启动&#xff1a;当设备无该应用进程时&#xff0c;用户操作拉起应用&#xff…...

编程日记 2025/1/1 14:21:37

C++ 实现map容器从大到小排序

map容器默认从小到大排序 利用仿函数可以修改map容器的排序规则为从大到小 示例&#xff1a; #include<iostream> #include<string> #include<map> using namespace std; class MyCompare { public: bool operator()(const int v1, const int v2) co…...

编程日记 2025/1/1 14:19:34

java中的文件操作

基础知识 1.File类对象的常用方法 一、 创建文件和目录 1.createNewFile() 用于创建一个新的文件&#xff0c;如果文件已经存在&#xff0c;则返回 false File file new File("C:\\Users\\P51\\Desktop\\file.txt"); file.createNewFile(); 2.mkdir() 用于创建一个…...

编程日记 2025/1/1 14:17:32

修复OpenHarmony系统相机应用横屏拍照按钮点不到的问题

适配OpenHarmony系统相机应用横屏UI&#xff0c; 相关pr: https://gitee.com/openharmony/applications_camera/pulls/233/files 适配效果 如何安装 编译好的hap提供在附件中 1.预置在源码&#xff0c;随固件安装 2.安装hap hdc shell "mount -o remount,rw /"…...

编程日记 2025/1/1 14:14:29

2024165读书笔记|《飞花令·合》——人生飘忽百年内，且须酣畅万古情

2024165读书笔记|《飞花令合》—— 人生飘忽百年内&#xff0c;且须酣畅万古情 屈原班婕妤曹植刘绘卢思道卢照邻苏味道刘希夷李白高适杜甫司空曙白居易温庭筠韦庄窦叔向张泌林逋柳永晏殊欧阳修李觏舒亶秦观陈瓘李清照陆游辛弃疾姜夔蒋捷吴伟业纳兰性德张惠言邓廷桢 《飞花令合》…...

编程日记 2025/1/1 14:09:25

哈夫曼编码(Huffman Coding)与哈夫曼树(Huffman Tree)

已知字符集{a,b,c,d,e,f}&#xff0c;若各字符出现的次数分别为6&#xff0c;3&#xff0c;8&#xff0c;2&#xff0c;10&#xff0c;4&#xff0c;则对应字符集中各字符的哈夫曼编码可能是&#xff08; &#xff09;。 A.00&#xff0c;1011&#xff0c;01&#xff0…...

编程日记 2025/1/1 14:08:24

Django项目中高效管理和使用选择常量

引言 在开发Django项目时，我们经常需要处理各种选择字段，比如用户类型、订单状态或产品分类等。如何有效地管理这些选择常量，使其在整个项目中保持一致性，同时又易于维护和更新呢？本文将介绍一种在Django项目中集中管理和使用选择常量的方法。 正文 © ivwdcwso (I…...

编程日记 2025/1/1 14:06:22

拦截器（Interceptor）的使用

在Java Web开发中&#xff0c;拦截器&#xff08;Interceptor&#xff09;是一种动态拦截请求和响应的对象&#xff0c;它可以在请求被控制器处理之前和之后执行一些预处理和后处理逻辑。要定义一个拦截器并使其生效&#xff0c;通常需要以下几个步骤&#xff1a; 1. 定义拦截…...

编程日记 2025/1/1 14:05:20

线段树例题题解

卫星覆盖&#xff08;NOI1997&#xff09; 题面&#xff1a; SERCOI&#xff08;Space-Earth Resource Cover-Observe lnstitute&#xff09; 是一个致力于利用卫星技术对空间和地球资源进行覆盖观测的组织。现在他们研制成功一种新型资源观测卫星 -SERCOI-308。这种卫星可以…...

编程日记 2025/1/1 14:04:18

AI提示词工程的“优化背后”：如何通过精准提示提升模型性能？

提示词工程（Prompt Engineering）已经成为推动AI模型如GPT等发挥其强大能力的核心。AI模型的输出质量与输入的提示词密切相关。因为之前已经大致用过一段时间提示词，所以这篇文章集中在有一定基础，起码对提示词不陌生，想要去设计和优化提示词+处理复杂问题的时候不知道如何…...

编程日记 2025/1/1 13:56:09

c# Record关键字

在 C# 9.0 中引入了 record 关键字&#xff0c;用于定义记录类型&#xff08;Record Types&#xff09;。记录类型是一种轻量级的数据载体&#xff0c;专注于表示数据&#xff0c;它提供了内置的相等性比较、生成属性和方法等功能&#xff0c;使得编写数据类更加简洁和高效。 …...

编程日记 2025/1/1 13:52:05

高效管理 Nginx 的利器：nginxWebUI 指南和 Docker 部署安装过程

前言 Nginx WebUI 是一个为 Nginx 提供图形化管理界面的工具。通过 WebUI&#xff0c;用户可以轻松管理 Nginx 配置&#xff0c;而无需直接编辑配置文件&#xff0c;尤其适合新手用户和频繁修改配置的场景。 官网文档&#xff1a;nginxWebUI - 文档 本文将分享为什么选择 ngin…...

编程日记 2025/1/1 13:51:04

家政预约小程序04活动管理表结构设计

目录 1 创建活动表2 创建活动规则表3 创建活动参与记录表总结 为了满足我们日常的营销&#xff0c;我们通常需要搞一些活动&#xff0c;比如满减、折扣、团购等。启动活动后&#xff0c;会在首页进行显示&#xff0c;当用户访问小程序的时候&#xff0c;就可以参与活动&#xf…...

编程日记 2025/1/1 13:49:02

不只是YOLOv5！详解Windows‘页面文件太小’错误的通用解决思路与内存优化技巧

不只是YOLOv5&#xff01;详解Windows‘页面文件太小’错误的通用解决思路与内存优化技巧 当你在深夜赶工一个重要的机器学习项目&#xff0c;或是渲染一段4K视频时&#xff0c;突然弹出一个冰冷的错误提示&#xff1a;"页面文件太小&#xff0c;无法完成操作"。这一…...

编程新知 2026/5/21 4:03:02

磁性衬底导向的宽带超材料吸波体的吸波机理及设计方案【附代码】

✨ 长期致力于磁性材料、超材料吸波体、宽频带微波吸收、吸波机理、智能算法研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;对称模型分析多层反射干涉…...

编程新知 2026/5/21 3:29:42

Gmail现可语音对话式检索邮件，亮相Google IO 2026

谷歌在向Gmail注入AI功能的道路上仍未停步。本周二&#xff0c;在年度开发者大会Google IO 2026上&#xff0c;这家科技巨头宣布对Gmail的"AI收件箱"功能进行升级扩展&#xff0c;正式引入对话式AI交互能力。这意味着用户今后可以直接向Gmail发问&#xff0c;而无需再…...

编程新知 2026/5/21 2:51:00

中间件简单题目教学

题目1&#xff1a;环境搭建与简单模式使用 Docker 启动 RabbitMQ 4.x 容器&#xff0c;用户 guest&#xff0c;密码 123456&#xff0c;映射管理端口 15672。编写 Java 原生生产者&#xff0c;向队列 test_queue 发送消息 "Hello Exam"。编写 Java 原生消费者&#x…...

编程新知 2026/5/21 1:58:35

深入解析RoboMaster电机数据包：从CAN原始字节到速度、角度、电流的转换全流程

深入解析RoboMaster电机数据包&#xff1a;从CAN原始字节到速度、角度、电流的转换全流程 在机器人竞赛和工业控制领域&#xff0c;CAN总线通信因其高可靠性和实时性成为电机控制的黄金标准。大疆RoboMaster系列电机通过CAN协议传递的8字节数据包&#xff0c;就像一串精心设计的…...

编程新知 2026/5/20 23:49:39

(最新版)GitGitHub实操图文详解教程(10)—SSH

版权声明 本文原创作者：谷哥的小弟 作者博客地址：http://blog.csdn.net/lfdfhl 1. 应用场景 前面几课已经完成了本地Git基础操作：先通过git init初始化仓库，再用git status查看状态，用git add把修改加入暂存区，用git commit创建本地提交，最后用git log查看提交历史。到…...

编程新知 2026/5/20 23:38:06

联发科MT6873核心板：5G安卓设备开发实战与硬件设计指南

1. 项目概述&#xff1a;MT6873核心板&#xff0c;一款为智能终端注入5G灵魂的“心脏”在智能硬件开发领域&#xff0c;选对一颗“心脏”——也就是核心板或主控模块&#xff0c;往往决定了整个产品的性能上限、功能边界和市场竞争力。今天要深入聊的&#xff0c;就是联发科&am…...

编程新知 2026/5/20 23:14:30

seo优化具体需要做什么？老站长每天必做的4件日常工作

早上8点15分&#xff0c;启动电脑&#xff0c;打开百度统计与Google Search Console后台。接手一个上线刚满两周的新域名&#xff0c;查看昨日的独立访客(UV)和页面浏览量(PV)数字。B2B机械设备类的展示型网站&#xff0c;前30天的自然搜索点击量极少数能突破100次。每天只发企…...

编程新知 2026/5/20 23:05:23

告别Rufus！在Ubuntu 22.04上用Ventoy打造你的万能Windows安装盘（附PE系统集成）

在Ubuntu 22.04上使用Ventoy打造全能Windows安装与维护工具盘 作为一名长期以Linux为主力系统的开发者&#xff0c;难免会遇到需要为朋友或备用机安装Windows的场景。传统方案往往要求我们临时切换到Windows环境使用Rufus等工具&#xff0c;既低效又违背Linux用户的习惯。本文将…...

编程新知 2026/5/20 22:51:08

MTK手机用上高通QC快充，背后多出的那颗‘xmusb350’芯片到底在忙啥？

MTK手机为何需要外挂xmusb350芯片实现高通QC快充&#xff1f; 当你在电商平台搜索"支持QC快充的MTK手机"时&#xff0c;可能会发现一个有趣的现象&#xff1a;采用联发科处理器的机型在充电模块描述中&#xff0c;常会特别标注"搭载独立QC协议芯片"。这背后…...

编程新知 2026/5/20 22:49:03