jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class
具体演示如下:
1、HTML结构:设计三个li元素
<ul id="test"> <li>Glen</li> <li>Tane</li> <li>John</li> </ul>
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'); // 添加当前元素的样式 });
});
jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class的更多相关文章
- jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...
- 都div在所有li的html()值被设置"哈哈",当点击设置"我被点击",其余的还是不点击设置“哈哈”
<1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- jQuery 学习笔记2 点击时弹出一个对话框
上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- 点击li ,父辈出现; 子级,子辈不出现. prevUntil ---> 前面多个, 截止到 截止元素 , prev([expr]) --> 前面一个.
要求: 1. 点击第一级 [1知识点] 的时候, [1知识点] 前有 圆圈. 点击 第二级 [1-1知识点, 1-2知识点, 1-3知识点] 时 , [1知识点]出现 圆圈. 2. 点击 第一级 ...
- /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项,给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类,给ul加 .nav-stacked: 垂直排列BootStrap
<meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...
- 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)
面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...
随机推荐
- ELK日志处理
ELK的工作原理: 使用多播进行机器发现同一个集群内的节点,并汇总各个节点的返回组成一个集群,主节点要读取各个节点的状态,在关键时候进行数据的恢复,主节点会坚持各个节点的状态,并决定每个分片的位置,通 ...
- Python datetime描述
(1)字符串转datetime:>>> string = '2014-01-08 11:59:58'>>> time1 = datetime.datetime.st ...
- nginx: [emerg] unexpected “}”
https://blog.csdn.net/gxdvip/article/details/46345129
- PHP读取文件夹的文件列表
/** * getDir()取文件夹列表,getFile()取对应文件夹下面的文件列表,二者的区别在于判断有没有“.”后缀的文件,其他都一样 */ //获取文件目录列表,该方法返回数组 functio ...
- Python基础系列----序列(列表、元组、字符串)
1.定义 1 ...
- CentOS 7.4 如何安装 MariaDB 10.3.9 Stable 数据库
CentOS 7.4 如何安装 MariaDB 10.3.9 Stable 数据库 一.CentOS 7.4上卸载 Mariadb 数据库 1.查询所安装的MariaDB组件 [libin@VM_0_ ...
- Python函数式编程——map()、reduce()
文章来源:http://www.pythoner.com/46.html 提起map和reduce想必大家并不陌生,Google公司2003年提出了一个名为MapReduce的编程模型[1],用于处理 ...
- C#将String传入C++的char*
C++的函数参数列表中包含一个char*的输出型参数,然而在C#调用该dll时候,会自动将函数的中的char*参数“翻译”为sbyte*, 使用了各种方法都不能调用函数,主要是不能合适的转换为sbyt ...
- Visual Studio Xamarin提示Bonjour backend初始化失败
Visual Studio Xamarin提示Bonjour backend初始化失败 错误信息:The Bonjour backend failed to initialize, automatic ...
- JZYZOJ1372 [noi2002]荒岛野人 扩展欧几里得
http://172.20.6.3/Problem_Show.asp?id=1372 想法其实很好想,但是我扩展欧几里得还是用得不熟练,几乎是硬套模板,大概因为今天一个下午状态都不大好.扩展欧几里得算 ...