32.选择器

选择器

html部分

<div class="toggle-container"><input type="checkbox" id="good" class="toggle"><label for="good" class="label"><div class="ball"></div></label><span>good</span>
</div>
<div class="toggle-container"><input type="checkbox" id="cheap" class="toggle"><label for="cheap" class="label"><div class="ball"></div></label><span>cheap</span>
</div>
<div class="toggle-container"><input type="checkbox" id="fast" class="toggle"><label for="fast" class="label"><div class="ball"></div></label><span>fast</span>
</div>

css部分

*{margin: 0;padding: 0 ;
}
body{display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;overflow: hidden;
}.toggle-container{display: flex;align-items: center;margin: 10px 0;width: 200px;
}
.label{position: relative;background-color: #d0d0d0;border-radius: 50px;cursor: pointer;display: inline-block;margin: 0 15px 0;width: 80px;height: 40px;
}
.toggle{visibility: hidden;
}
.toggle:checked + .label{background-color: #8e44ad;
}
.ball{background-color: #fff;height: 34px;width: 34px;border-radius: 50%;position: absolute;top: 3px;left: 3px;animation: scrollOff .3s linear forwards;
}
.toggle:checked + .label .ball{animation: scrollOn .3s linear forwards;
}@keyframes scrollOff{100%{transform: translateX(0) scale(1);} 50%{transform: translateX(20px) scale(1.2);}0%{transform: translateX(40px) scale(1);}
}
@keyframes scrollOn {50%{transform: translateX(20px) scale(1.2);}100%{transform: translateX(40px) scale(1);}
}

js部分

// 获取dom
let toggles=document.querySelectorAll(".toggle")
toggles=Array.from(toggles)// 按钮绑定事件
toggles.forEach((item)=>{item.addEventListener("change",(e)=>{const {checked,id}=e.targetif(all()){if(id=='good'){toggles[1].checked=false}if(id=='cheap'){toggles[2].checked=false}if(id=='fast'){toggles[0].checked=false}}})
})// 是否全选
function all(){return toggles.every((item)=>{return item.checked})
}

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/16007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云原生训练营课程大纲

第一部分&#xff1a;Go 语****言基础 模块一&#xff1a;Go 语言特性 教学目标&#xff1a; 理解 Go 语言基本语法 理解 Go 语言常用数据类型 理解 Go 语言常用小技巧 深入理解 Go 语言的多线程编程 针对的用户痛点&#xff1a; 云原生从业者因为未熟练掌握 Go 语言&#…

bash sh 和 ./ 的区别

bash&#xff1a; 这是Bash shell的解释器。当你使用bash script.sh运行脚本时&#xff0c;你是在告诉系统使用Bash解释器来执行脚本。这意味着脚本中的所有Bash特性都可以使用。 sh&#xff1a; 这是Bourne shell的解释器。当你使用sh script.sh运行脚本时&#xff0c;你是在告…

HTML的基础知识

HTML&#xff08;超文本标记语言&#xff09;是一种用于创建网页的标记语言。它提供了一套标记&#xff08;标签&#xff09;和元素&#xff08;元素&#xff09;的规范&#xff0c;用于描述网页结构和内容的呈现方式。HTML 文件是由一系列的标签组成&#xff0c;这些标签用于定…

uni-app云打包(android)(自有证书、云端证书、公共测试证书)

一、进入云打包入口 发行->原生App-云打包 二、证书选择 1、使用自有证书 ①进入香蕉云编&#xff08;这里采用的证书从香蕉云编进行生成&#xff09; 香蕉云编-app打包上架工具类平台 ②进入页面选择“生成签名证书”->"立即创建证书" ③选择“安卓证书生…

数字人会成为文旅行业的新增量吗?写实数字人定制包含哪些技术?

近年来&#xff0c;各大文旅机构均在围绕数字人展开了文旅营销创作&#xff0c;凭借着写实数字人定制技术&#xff0c;将数字人的人设、功能以及才艺得到创新&#xff0c;并由此在文旅形态上展开了诸多尝试。 比如会唱山歌多才多艺的数字人刘三姐&#xff0c;使用多种语言推介…

OrderApplication

目录 1 OrderApplication 2 /// 获提交订单页面数据 2.1.1 //设置会员信息 2.1.2 //获取订单商品信息 2.1.3 //获取收货地址 2.1.4 //发票信息 OrderApplication#region web公共方法

windows环境下adb 下载和配置,连接手机。

ADB下载地址&#xff1a; https://adbdownload.com/ 选择下载windows系统的。 下载后解压&#xff0c;查看adb.exe所在的目录&#xff0c;如下 这里将路径复制下来&#xff1a;D:\ADB 配置到系统环境变量中。 然后再打开cmd&#xff0c;输入adb version查看版本。 出现…

ThinkPHP8知识详解:ThinkPHP8是什么?

欢迎你来到PHP服务网学习最新的ThinkPHP8开发教程&#xff0c;本文介绍一下ThinkPHP8是什么&#xff1f; 1、ThinkPHP8是ThinkPHP框架的最新版本&#xff0c;它在之前版本的基础上进行了改进和优化。它采用了现代化的设计理念和架构&#xff0c;提供了更好的性能和更丰富的功能…

【机器学习】Linear Regression

Model Representation 1、问题描述2、表示说明3、数据绘图4、模型函数5、预测总结附录 1、问题描述 一套 1000 平方英尺 (sqft) 的房屋售价为300,000美元&#xff0c;一套 2000 平方英尺的房屋售价为500,000美元。这两点将构成我们的数据或训练集。面积单位为 1000 平方英尺&a…

【ubuntu|内核】ubuntu 22.04修改内核为指定版本

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 ubuntu 22.04 安装指定内核 1. 正文 查看已安装的内核镜像 dpkg --get-selections | grep linux-image1.1 安装指定版本的内核 安装镜像 sudo apt-g…

41. linux通过yum安装postgresql

文章目录 1.下载安装包2.关闭内置PostgreSQL模块:3.安装postgresql服务:4.初始化postgresql数据库:5.设置开机自启动:6.启动postgresql数据库7.查看postgresql进程8.通过netstat命令或者lsof 监听默认端口54329.使用find命令查找了一下postgresql.conf的配置位置10.修改postgre…

date日期相关操作汇总

一、若表中date字段存储形式为&#xff1a;2021-05-16 在表中找到2021年8月份数据的方法 方法1. like 语法&#xff1a;where date like 2021-08%; 前面能匹配上的就是2021年8月份。 方法2. year,month函数&#xff08;mysql中有&#xff0c;oracle中不确定&#xff09; 语法&…

基于Java+SpringBoot制作一个学生公寓管理小程序

制作一个学生公寓管理小程序,旨在优化和简化学生公寓的日常管理工作。该系统涵盖了各种功能模块,以满足学生住宿的需求,同时提供方便、高效的管理方式,该系统包含用户管理、卫生评比、来访登记、宿舍报修等模块。 一、小程序1.1 项目创建1.2 首页轮播图快捷导航iconfont图标…

修改若依框架为自己的项目并上传到git

第一步: 打开后台若依项目,把全局替换打开,搜索ruoyi 和 RuoYi 和 若依 分别换成自己公司的名称( 记住要把区分大小写打开 ) 第二步: 关闭idea中的项目,然后在文件夹中打开这个项目,然后搜索target( 缓冲 ) 删除,部分人的电脑上面还有imp文件切记也要删除 第三步: 接着把项目…

重要通知|关于JumpServer开源堡垒机V2版本产品生命周期的相关说明

JumpServer&#xff08;https://github.com/jumpserver&#xff09;开源项目创立于2014年6月&#xff0c;已经走过了九年的发展历程。经过长期的产品迭代&#xff0c;JumpServer已经成为广受欢迎的开源堡垒机。 JumpServer堡垒机遵循GPL v3开源许可协议&#xff0c;是符合4A&a…

从Vue2到Vue3 Composition API

Vue 3引入了一种新的API称为Composition API&#xff0c;它提供了一种不同于Vue 2的组织和重用逻辑的方式。Composition API允许将逻辑按功能分组&#xff0c;而不是按照组件选项进行分组。 常见变化和用法 下面是一些Vue 2到Vue 3 Composition API的常见变化和用法&#xff…

无线蓝牙耳机有什么推荐?怎么选择适合自己的耳机?七款蓝牙耳机分享

随着信息技术的不断发展&#xff0c;蓝牙耳机的不断发展也是必然的&#xff0c;可以说蓝牙耳机在大部分人们的生活中是不可缺少的一部分。那么我们该怎么去挑选出适合我们自己的需求的“蓝”朋友呢&#xff1f; 第一款&#xff1a;南卡小音舱lite2蓝牙耳机 推荐指数&#xff…

使用Anaconda3创建pytorch虚拟环境

一、Conda配置Pytorch环境 1.conda安装Pytorch环境 打开Anaconda Prompt&#xff0c;输入命令行&#xff1a; conda create -n pytorch python3.6 ​ 输入y&#xff0c;再回车。 稍等&#xff0c;便完成了Pytorch的环境安装。我们可以利用以下命令激活pytorch环境。 conda…

JVM源码剖析之JIT工作流程

版本信息&#xff1a; jdk版本&#xff1a;jdk8u40思想至上 Hotspot中执行引擎分为解释器、JIT及时编译器&#xff0c;上篇文章描述到解释器过度到JIT的条件。JVM源码剖析之达到什么条件进行JIT优化 这篇文章大致讲述JIT的编译过程。在JDK中javac和JIT两部分跟编译原理挂钩&a…

使用Kmeans算法完成聚类任务

聚类任务 聚类任务是一种无监督学习任务&#xff0c;其目的是将一组数据点划分成若干个类别或簇&#xff0c;使得同一个簇内的数据点之间的相似度尽可能高&#xff0c;而不同簇之间的相似度尽可能低。聚类算法可以帮助我们发现数据中的内在结构和模式&#xff0c;发现异常点和离…