思路:点击当前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. 解决打包时IsCmdBld.exe出错的问题

    1.查看环境变量是否配置了 2.查看是否是使用administrator登陆的,要求使用administrator登陆否则可能会出现权限不足的现象

  2. 百度网盘自动上传脚本-bpcs_uploader

    安装jsonpear install pecl/json 一.bpcs_uploader下载和使用: 1.下载地址:http://oott123.github.com/bpcs_uploader/ 2 ...

  3. C语言数据结构-创建链表的四种方法

    结点类型: typedef int datatype; typedef struct NODE{ datatype data; struct NODE *next; }Node,*LinkList; ...

  4. Ruby on Rails: 使用devise+cancan+rolify建立完整的权限管理系

    devise.cancan和rolify这三个组件结合,可以建立完整而强大的用户权限模型. devise介绍,负责用户注册.登录.退出.找回密码等操作.细节参考devise on github can ...

  5. NOI2007 生成树计数

    题目 首先我要吐槽,这题目就是坑,给那么多无用的信息,我还以为要根据提示才能做出来呢! 算法1 暴力,傻傻地跟着提示,纯暴力\(40\)分,高斯消元\(60\)分. 算法2 DP!一个显然的东西是,这 ...

  6. 官方发布的新版本Qt已经不支持XP了,要自己从源代码编译

    官方发布的新版本Qt已经不支持XP了,要自己从源代码编译,编译选项里有个-target项,用来提供XP支持的,编译时加上-target xp就可以了 http://www.qtcn.org/bbs/r ...

  7. 【REDO】删除REDO LOG重做日志组后需要手工删除对应的日志文件(转)

    为保证重新创建的日志组成员可以成功创建,我们在删除日志组后需要手工删除对应的日志文件. 1.查看数据库当前REDO LOG日志相关信息1)查看日志组信息sys@ora10g> select * ...

  8. Python,PIL压缩裁剪图片

    自己写了用来压缩 DC 照片的,批量处理整目录文件,非常方便.需要安装 PIL #!/usr/bin/env python import Image import os import os.path ...

  9. java基本数据类型转换成byte[]数组

    import java.io.UnsupportedEncodingException;  public class ConToByte {      /**     * double转换byte   ...

  10. 'datetime.datetime' has no attribute 'datetime'问题

    写python时,用到了日期计算.于是写了datetime.datetime(*d_startTime[0:6])这样的代码. 结果编译不通过,报 'datetime.datetime' has no ...