jquery怎么在点击li标签之后添加一个在class,点击下一个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'); // 添加当前元素的样式
});
});
4、效果演示:

jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?的更多相关文章
- jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...
- jQuery动态添加li标签并添加属性和绑定事件
代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...
- Html中解决点击 a 标签刷新的问题,实现点击时不刷新
Html中解决点击 a 标签刷新的问题 我们可以在 <a href=""></a>中,将地址属性href设置为“#” 例如 <a href=" ...
- html li标签前面添加图标三种方法
今天无聊写下这个例子,希望对初学者有帮助,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
- jquery轻松实现li标签上下滚动的原理
在网站上我们常看到有滚动的文字或者图片,比如消息提醒,新闻列表,等等.那么这些效果是怎么形成的呢?经过查阅,找到一种十分方便的写法,经过改良,得出我自己的终极版滚动效果. 我先写个布局吧 <di ...
- jquery模拟点击A标签的问题
我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久. 先看下边的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <htm ...
- js会飞的li标签
当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- jQuery基础之二(操作标签)
一:样式操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();/ ...
随机推荐
- Mysql事务,并发问题,锁机制-- 幻读、不可重复读(转)
1.什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成功,要不全部撤销 隔离性:事务之间相互独立,互不干扰 一致性:数据库正确地改变状态后,数据库的一致性约 ...
- 清华集训2014 day1 task1 玛里苟斯
题目 这可算是描述很简单的一道题了!但是不简单. \(S\)是一个可重集合,\(S = \{a_1, a_2, \dots, a_n \}\). 等概率随机取\(S\)的一个子集\(A = \{a_{ ...
- zepto.js介绍(持续更新)
前言: zepto是一个简化版的jQuery,主要针对移动端开发. 简化了jQuery里很多的浏览器兼容性代码,jQuery的很多方法都被拿掉了(eg:slideUp). WP设备兼容性很差. 官方链 ...
- PHP - 操作MySQL数据库
第16章 PHP操作MySQL 学习要点: 1.PHP连接到MySQL 2.增删改查 3.其他常用函数 如果你已经具有了使用PHP.SQL和MySQL的丰富经验,现在就可以把所有这些技术组合在一起.P ...
- 网盘大全, 邮箱大全 good
网盘推荐 115网盘 注册 百度网盘 注册 微云 注册 360云盘 注册 金山快盘 注册 新浪微盘 注册 和彩云 注册 酷盘 注册 OneDrive 外链 BOX 注册 Dropbox 注册 国内网盘 ...
- 查询mysql哪些表正在被锁状态
1.查进程,主要是查找被锁表的那个进程的ID SHOW PROCESSLIST; 2.kill掉锁表的进程ID KILL 10866;//后面的数字即时进程的ID
- VC 对话框背景颜色、控件颜色
系统环境:Windows 7软件环境:Visual C++ 2008 SP1本次目的:为对话框设置背景颜色.控件颜色 既然MFC对话框不好开发,那么现在我们来开始美化我们的对话框.为对话框设置背景颜色 ...
- 服务确定(服务类收货ML81N)
FUNCTION zrfc_mm005. *"---------------------------------------------------------------------- * ...
- js正则验证手机号码有效性
验证130-139,150-159,180-189号码段的手机号码 <script type="text/javascript"> [-]{})|([-]{})|([- ...
- eclipse升级后Android使用JAR报错
升级ADT22以后,老项目编译时后遇到 NoDefFoundClassError 这个错误,因为项目中使用了jar文件. 遇到此问题的解决步骤: 1.项目根目录下建立 libs ,并将jar文件移入 ...