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次 ...
随机推荐
- electron 编译 sqlite3避坑指南---尾部链接有已经编译成功的sqlite3
electron 编译 sqlite3避坑指南(尾部链接有已经编译成功的sqlite3) sqlite很好用,不需要安装,使用electron开发桌面程序,sqlite自然是存储数据的不二之选,奈何编 ...
- 解决Django在mariadb创建的表插入中文乱码的问题
1.确保你的mariadb数据库的character_set_connection.character_set_database.character_set_server的编码均为utf8 Maria ...
- CentOS6.5修改/etc/pam.d/sshd后root无法ssh登陆
现象:由于公司需要服务器的登陆操作进行安全加固,同事为了省事,直接把CentOS7上的/etc/pam.d/sshd替换掉CentOS6.5上的/etc/pam.d/sshd,导致root用户ssh登 ...
- 【剑指offer】面试题 16. 数值的整数次方
面试题 16. 数值的整数次方 题目描述 题目:给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 解答过程 下面的讨论中 x 代表 bas ...
- 启动Ubuntu时出现 /dev/sda2 clean 和 /dev/sda2 recovering journal 现象的解决办法
最近在Ubuntu 18.4上安装Nvidia显卡后,显卡似乎总是不能完全兼容. 第一次出现问题时,是登录账号后,发现系统采用了默认显卡驱动,而已装过的显卡驱动则有损坏导致无法使用. 第二次出现问题时 ...
- 洛谷——P1478 陶陶摘苹果(升级版)
题目描述 又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2005普及组第一题不同的是:陶陶之前搬凳子,力 ...
- 洛谷——P1109 学生分组
P1109 学生分组 题目描述 有N组学生,给出初始时每组中的学生个数,再给出每组学生人数的上界R和下界L(L<=R),每次你可以在某组中选出一个学生把他安排到另外一组中,问最少要多少次才可以使 ...
- 【Java多线程】线程池学习
Java线程池学习 众所周知,Java不仅提供了线程,也提供了线程池库给我们使用,那么今天来学学线程池的具体使用以及线程池基本实现原理分析. ThreadPoolExecutor ThreadPool ...
- 关于phonegap的白名单机制
今天在项目中发现了一个问题,使用phonegap开发的APP默认情况下可以将外部网页加载进入手机APP当中,这是相当危险的,同时也会给人一种APP非native的感觉. 可能遇见的一种情况是有些WiF ...
- [POJ1980]Unit Fraction Partition(搜索)
Unit Fraction Partition Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 4571 Accepted ...