思路:点击当前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. DP HDIJ1421 搬宿舍

    Problem Description 搬寝室是很累的,xhd深有体会.时间追述2006年7月9号,那天xhd迫于无奈要从27号楼搬到3号楼,因为10号要封楼了.看着寝室里的n件物品,xhd开始发呆, ...

  2. Android studio gradle配置

    什么是Gradle? Gradle是一种依赖管理工具,基于Groovy语言,面向Java应用为主,它抛弃了基于XML的各种繁琐配置,取而代之的是一种基于Groovy的内部领域特定(DSL)语言. gr ...

  3. PCI-X总线

    PCI-X接口是并连的PCI总线(Peripheral Components Interconnect)的更新版本号,仍採用传统的总线技术,只是有很多其它数量的接线针脚, 同一时候,如前所述的全部的连 ...

  4. PHP - 判断php是否对表单数据内的特殊字符自动转义

    get_magic_quotes_gpc 有两个返回值: 0:在php.ini文件中已经关闭自动转移. 1:在php.ini文件中已经开启自动转移. 由此函数进行判断表单是否转移: /** * * m ...

  5. 立贴读 《CLR》

    弱弱的说,我要开始读<CLR>这本书了,怕自己不能坚持下来,特立贴监督自己,本来是大牛们涉及的区域,现在好朋友的鼓励下,勇敢的踏入,如有错误,还请各位指正.

  6. CentOS: make menuconfig error: curses.h: No such file or directory

    the problem  when use centos5 to build kernel or busybox step 1. Centos中关于 ncurses.h:no such file or ...

  7. c语言,变长数组

    下面这个结构体,可以在malloc的时候指定数据data的长度,这样的形式就是变长数组:typedef struct{ int data_len; char data[0];//或char data[ ...

  8. NProxy——Mac和Linux平台下的Fiddler

    Fiddler 相信大家,尤其是前端工程师们都知道. 用它的文件替换功能,将线上的静态资源文件(JS.CSS.图片)替换为本地相应的文件,来调试线上(代码都被压缩过)UI的问题.的确是一神器.(相比, ...

  9. wxWidgets帮助文档(1)

    IMPLEMENT_APP IMPLEMENT_APP(className) 这是在应用程序中使用类的实现文件的应用程序类wxWidgets动态建筑.你用这个代替Old form: MyApp myA ...

  10. 杭电ACM1408——盐水的故事

    简单的题目,RT,就能够写出代码.须要注意的是类型的应用,应该用浮点型. 以下的是AC的代码: #include <iostream> using namespace std; int m ...