思路:点击当前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. 仿OpenStack开发云计算管理软件

    仿OpenStack开发云计算管理软件 使用Python语言开发一套类似OpenStack的云计算管理平台LouCloud,具备基本的用户,服务器,镜像与 虚拟机管理功能,学习IaaS,虚拟化,Lib ...

  2. HDOJ 5088 Revenge of Nim II 位运算

    位运算.. .. Revenge of Nim II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  3. ASP.NET 4.5 Bundle组件(捆绑、缩小静态文件)

    阅读目录: 1.开篇介绍 2.System.Web.Optimization 组件 3.System.Web.Optimization 组件基本原理 4.扩展自定义类型静态文件 1]开篇介绍 这篇文章 ...

  4. 基于visual Studio2013解决C语言竞赛题之1041反向打印

          题目 解决代码及点评 /* 功能:将一个整数(最多是10位数)从低位到高位打印出来, 如该数是12345时,输出应是54321(只占一行) 时间:19:18 201 ...

  5. 阿根廷探戈(Argentine Tango)舞步

    阿根廷探戈(Argentine Tango)舞步 阿根廷探戈(Argentine Tango)舞步 2011-11-22 13:05:11   不像其它大部分的社交舞,阿根廷探戈没有固定的舞步,它是一 ...

  6. 1030 - Image Is Everything

    Your new company is building a robot that can hold small lightweight objects. The robot will have th ...

  7. CentOS6 yum源支持更多rpm包的升级(使用第三方软件库EPEL、RPMForge与RPMFusion)

    转载于http://blog.csdn.net/erazy0/article/details/6878153 在CentOS下运行yum install flash-plugin或yum instal ...

  8. N使用exus2打造企业maven仓库(三)

    假设项目中,我没有使用maven,我应该做出选择,或为项目.或者用它来推动这个项目从maven.有人会问,为什么maven?无需maven我们没有很好的操作. 这里,只说两件事情我最欣赏:第一点是管理 ...

  9. openfire数据库中文乱码问题

    1.首先数据库的编码设置为UTF-8 2.项目的编码也要设置为UTF-8 假设数据保存到数据库的时候还有乱码  就要改动openfire配置文件 在openfire主文件夹\conf\openfire ...

  10. Swift - 使用NSURLSession加载数据、下载、上传文件

    NSURLSession类支持三种类型的任务:加载数据.下载和上传.下面通过样例分别进行介绍. 1,使用Data Task加载数据 使用全局的sharedSession()和dataTaskWithR ...