发布于:2021-10-11 09:04 阅读次数:1220 作者:云码素材 分类:技术分享 关键词:jquery
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class。
具体演示如下:
1、HTML结构:设计三个li元素
<div> <ul id="test"> <li>Glen</li> <li>Tane</li> <li>John</li> </ul> </div>
2、css样式:设计一个类selected,表示选中后的效果
<style> .selected{font-weight:bold; background: #ff99cc; color:#fff;} </style>
3、jquery代码:
$(function(){ $("#test li").click(function() { $(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素的样式 $(this).addClass('selected'); // 添加当前元素的样式 }); });
我要加群:资源共享的时代,不要再单打独斗!加小编微信号加入群:xnynews(备注:云码素材入群),qq群号:202498279,一起技术学习,资源分享!
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
热门标签
推荐模板
Light Year Admin后台模板 v4 iframe版本 基于Bootstrap 4.4.1
2024-10-20 22:57 浏览:24
html清爽ui设计作品集展示网站模板 响应式宣传网页制作代码模板
2024-09-23 10:12 浏览:238
热门文章
2022-05-10 08:48 浏览:30992
2Tik Tok 深田咏美抖音视频100+合集资源免费下载【绿色】
2022-10-31 08:42 浏览:29617
2022-03-27 09:29 浏览:15687
2022-09-11 15:02 浏览:12810
2020-04-13 15:31 浏览:11969
6免费使用chatgpt3种方式 chatgpt国内入口无需梯子
2023-04-23 17:52 浏览:10680
2022-09-08 10:28 浏览:9338
8三个开源的php论坛bbs源码 可自建 圈子 帖子社区网站!
2020-09-15 21:34 浏览:9324
2022-04-13 14:31 浏览:9179
2019-08-28 17:28 浏览:8649