按钮组实现切换时背景变化

 需求:

按钮组之间切换时,选中的按钮背景变色,其他按钮显示原来的颜色

css代码:

.btnClass{width: 120px;border: 1px solid #eeeeee;color: black;background-color: white;}
.btnChoosedClass{color: white;background-color: #1E9FFF;
}

html代码

<button class="layui-btn btnClass btnChoosedClass" >全部报警</button>
<button class="layui-btn btnClass" >已认定线索</button>
<button class="layui-btn btnClass" >废弃线索</button>
<button class="layui-btn btnClass" >未查看线索</button>

js代码

$(".btnClass").unbind('click').bind('click',function(evt){var btnClassArr = document.getElementsByClassName('btnClass');for(var i=0;i<btnClassArr.length;i++){$(btnClassArr[i]).removeClass('btnChoosedClass');}$(evt.currentTarget).addClass('btnChoosedClass');
})

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

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

相关文章

秋招后端开发面试题 - MySQL基础

目录 MySQL基础前言面试题MySQL 基础篇Mysql 的基础架构&#xff1f;MySQL 的长连接和短连接长连接引起的异常重启问题&#xff1f;说一下 MySQL 执行一条查询语句的内部执行过程&#xff1f;MySQL 查询缓存的功能有何优缺点&#xff1f;MySQL 的常用引擎都有哪些&#xff1f;I…

OpenHarmony实战开发-上传文件

Web组件支持前端页面选择文件上传功能&#xff0c;应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。 下面的示例中&#xff0c;当用户在前端页面点击文件上传按钮&#xff0c;应用侧在onShowFileSelector()接口中收到文件上传请求&#xff0c;在此接…

详解xml-java语言

1.XML在线学习手册 XML 教程 2.XML可以做什么 1.给两个程序之间进行数据通信。现在用的最多的是JSON。 2.给服务器做配置文件。 3.存储复杂的数据关系。 4.还可以充当小型的数据库。 3.书写格式 <?xml version"1.0" encoding"UTF-8" ?> <…

使用Gitbook生成电子书

背景 《Google工程实践文档》相对原文Google’s Engineering Practices documentation &#xff0c;部分内容过时了。需要更新中文版&#xff0c;并使用Gitbook把Markdown文件转换成对应的PDF电子书。   上一次生成PDF电子书是5年前&#xff0c;当时生成电子书的环境早已不在…

linux mint 简介

Linux Mint 的起源和特点&#xff1a; Linux Mint 是一个基于 Ubuntu 的用户友好型 Linux 发行版&#xff0c;自2006年起开始开发。它以其简洁的桌面环境和对新用户的易接近性而受到赞誉。Linux Mint 提供了多种桌面环境&#xff0c;包括但不限于 Cinnamon、MATE 和 Xfce&#…

虚拟键代码

虚拟键代码 虚拟键码 (Winuser.h) - Win32 apps | Microsoft Learn 在Windows操作系统中&#xff0c;虚拟键代码&#xff08;Virtual-Key Codes&#xff09;是一组用来表示键盘上按键的数值。这些代码通常用于Windows API函数&#xff0c;以便程序能够识别和处理键盘输入。 虚拟…

暴雨总裁孙辉:脚踏实地创未来

“所有行业都有算力的身影。”暴雨信息总裁孙辉说。身份核验、楼宇通行、仓储物流、交通出行……暴雨信息的算力资源正在各个领域加速落地。 2015年&#xff0c;孙辉与两名合伙人创办了暴雨信息&#xff0c;这是中国最早的一批算力公司之一。当时23岁的孙辉想法很简单。“看好…

Linux第三节--常见的指令介绍集合(持续更新中)

点赞关注不迷路&#xff01;&#xff0c;本节涉及初识Linux第三节&#xff0c;主要为常见的几条指令介绍。 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1f44d;&#x1f3fb; 收藏 ✨ 加关注&#x1f440; 期待与你共同进步! Linux下基本指令 1. man指令 Linu…

百科词条创建机构有哪些?

在互联网时代&#xff0c;百度百科作为我国最大的中文百科全书&#xff0c;已经成为人们获取知识、查询信息的重要途径。随着百度百科影响力的不断扩大&#xff0c;越来越多的人和企业试图通过创建企业词条来提升自身知名度&#xff0c;企业和个人为了在百度百科上占据一席之地…

ICP(迭代最近点)定位算法

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言ICP算法原理C++代码实现优缺点分析:前言 认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长! 本文先对ICP(迭代最近点)…

GoLand安装教程

GoLand-安装 GoLand是Go语言编程开发的一款工具&#xff0c;和 IntelliJ IDEA 一样&#xff0c;同为Jetbrains公司旗下的产品&#xff0c;专为Go语言开发的跨平台商业集成开发环境&#xff08;IDE&#xff09;&#xff0c;它的功能非常强大&#xff0c;它还不仅仅是一个Go IDE…

记一次动态规划的采坑之旅, 741摘樱桃 https://leetcode.cn/problems/cherry-pickup/description/

首次看题目时&#xff0c;发现是困难。立马想到了&#xff0c;动态规划。 再看题目&#xff0c; 摘樱桃&#xff0c;还要返回摘两次&#xff0c;求摘最多的樱桃。 大脑第一反应就是&#xff1a; 先使用动态规划&#xff0c;找到 0 0 到 n-1 n-1处走过的最大樱桃&#xff0c; 并…

重写muduo之EPollPoller

1、EPollPoller.h EPollPoller的主要实现&#xff1a;作为poller的派生类&#xff0c;把基类给派生类保留的这些纯虚函数的接口实现出来。 override表示在派生类里面&#xff0c;这些方法是覆盖方法。必须由编译器来保证在基类里面一定有这些函数的接口的声明。在派生类要重写…

从零开始学RSA:已知p+q和(p+1)(q+1)和已知p-q和n

(17)已知pq和(p1)(q1) 题目给出pq&#xff0c;(p1)(q1)&#xff0c;e和c。 首先需要求出phi&#xff0c;然后求解d&#xff0c;最后再求解m。 phi (p-1)(q-1) pq - (pq) 1 pq的值题目已经给出了&#xff0c;接下来只需要求出pq的值即可求出phi的值。题目还给出了(p1)(q1…

从OutputStream类看Java中的IO流操作

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

C#连接S7-200 smart通讯测试

honeytree 一、编程环境 VS2022软件&#xff0c;选择windows窗体应用&#xff08;.NET FrameWork&#xff09;&#xff1a;​博途TIA/WINCC社区VX群 ​博途TIA/WINCC社区VX群 添加NuGet程序包&#xff1b;S7netplus 二、引用http://S7.net 三、建立PLC链接 S7-200smart和…

使用Docker安装Jenkins

大家好&#xff0c;今天给大家分享如何使用docker安装jenkins&#xff0c;关于docker的安装和常用命令可以参考下面两篇文章&#xff0c;使用docker可以提高资源利用率&#xff0c;能够在不同的环境中轻松迁移和部署应用&#xff0c;在本文中就不过多赘述了。 Docker常用命令 …

工厂模式+策略模式完成多种登录模式的实现

前提 &#xff08;简单工厂不属于设计模式&#xff0c;而是一种编程思想【抽象一层出来】&#xff09;工厂方法模式、抽象工厂模式 以上都是为了解耦&#xff0c;如果考虑多个纬度&#xff08;如需要同时考虑多种电器&#xff0c;多种品牌&#xff09;则优先考虑抽象工厂。 …

怎么通过Java语言实现远程控制无人售货柜

怎么通过Java语言实现远程控制无人售货柜呢&#xff1f; 本文描述了使用Java语言调用HTTP接口&#xff0c;实现控制无人售货柜&#xff0c;独立控制售货柜、格子柜的柜门。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格 序号设备名称厂商1智能WiFi控…

ASP.NET网上图书预约系统的设计

摘 要 《网上图书预约系统的设计》是以为读者提供便利为前提而开发的一个信息管理系统&#xff0c;它不仅要求建立数据的一致性和完整性&#xff0c;而且还需要应用程序功能的完备、易用等特点。系统主要采用VB.NET作为前端的应用开发工具&#xff0c;利用SQL Server2000数据…