思路:点击当前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?的更多相关文章

  1. jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class

    思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...

  2. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  3. Html中解决点击 a 标签刷新的问题,实现点击时不刷新

    Html中解决点击 a 标签刷新的问题 我们可以在 <a href=""></a>中,将地址属性href设置为“#” 例如 <a href=" ...

  4. html li标签前面添加图标三种方法

    今天无聊写下这个例子,希望对初学者有帮助,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  5. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  6. jquery轻松实现li标签上下滚动的原理

    在网站上我们常看到有滚动的文字或者图片,比如消息提醒,新闻列表,等等.那么这些效果是怎么形成的呢?经过查阅,找到一种十分方便的写法,经过改良,得出我自己的终极版滚动效果. 我先写个布局吧 <di ...

  7. jquery模拟点击A标签的问题

    我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久. 先看下边的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <htm ...

  8. js会飞的li标签

    当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  9. jQuery基础之二(操作标签)

    一:样式操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();/ ...

随机推荐

  1. Mysql事务,并发问题,锁机制-- 幻读、不可重复读(转)

    1.什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成功,要不全部撤销 隔离性:事务之间相互独立,互不干扰 一致性:数据库正确地改变状态后,数据库的一致性约 ...

  2. 清华集训2014 day1 task1 玛里苟斯

    题目 这可算是描述很简单的一道题了!但是不简单. \(S\)是一个可重集合,\(S = \{a_1, a_2, \dots, a_n \}\). 等概率随机取\(S\)的一个子集\(A = \{a_{ ...

  3. zepto.js介绍(持续更新)

    前言: zepto是一个简化版的jQuery,主要针对移动端开发. 简化了jQuery里很多的浏览器兼容性代码,jQuery的很多方法都被拿掉了(eg:slideUp). WP设备兼容性很差. 官方链 ...

  4. PHP - 操作MySQL数据库

    第16章 PHP操作MySQL 学习要点: 1.PHP连接到MySQL 2.增删改查 3.其他常用函数 如果你已经具有了使用PHP.SQL和MySQL的丰富经验,现在就可以把所有这些技术组合在一起.P ...

  5. 网盘大全, 邮箱大全 good

    网盘推荐 115网盘 注册 百度网盘 注册 微云 注册 360云盘 注册 金山快盘 注册 新浪微盘 注册 和彩云 注册 酷盘 注册 OneDrive 外链 BOX 注册 Dropbox 注册 国内网盘 ...

  6. 查询mysql哪些表正在被锁状态

    1.查进程,主要是查找被锁表的那个进程的ID SHOW PROCESSLIST; 2.kill掉锁表的进程ID KILL   10866;//后面的数字即时进程的ID

  7. VC 对话框背景颜色、控件颜色

    系统环境:Windows 7软件环境:Visual C++ 2008 SP1本次目的:为对话框设置背景颜色.控件颜色 既然MFC对话框不好开发,那么现在我们来开始美化我们的对话框.为对话框设置背景颜色 ...

  8. 服务确定(服务类收货ML81N)

    FUNCTION zrfc_mm005. *"---------------------------------------------------------------------- * ...

  9. js正则验证手机号码有效性

    验证130-139,150-159,180-189号码段的手机号码 <script type="text/javascript"> [-]{})|([-]{})|([- ...

  10. eclipse升级后Android使用JAR报错

    升级ADT22以后,老项目编译时后遇到 NoDefFoundClassError  这个错误,因为项目中使用了jar文件. 遇到此问题的解决步骤: 1.项目根目录下建立 libs ,并将jar文件移入 ...