思路:点击当前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. 创建成功的Python项目

    创建成功的Python项目 前端开发工具技巧介绍—Sublime篇 SEO在网页制作中的应用 观察者模式 使用D3制作图表 英文原文:Create successful Python projects ...

  2. Linux下基于Erlang的高并发TCP连接压力实验

    1.实验环境: 联想小型机: 操作系统:RedHat Enterprise LinuxServer release6.4(Santiago) 内核版本号:Linux server1 2.6.32-35 ...

  3. 项目优化经验分享(六)SVN冲突和处理

    上一篇博客我们分享了新增需求的确定思想<站在全局看问题>.今天我们来分享项目开发中SVN冲突的解决经验:SVN冲突和处理! 引言 开发过项目的人都知道,公司开发一个项目都会使用到版本号控制 ...

  4. ffmpeg中ff_scale_image()内存泄露

    版本:ffmpeg1.2         int    ff_scale_image( uint8_t *dst_data[4], int dst_linesize[4],               ...

  5. NHibernate - HQL - 添加和更改

    添加: /// <summary> /// 等待乙方做出回应 A /// </summary> private void button2_Click_1(object send ...

  6. Troubleshooting(updating...)

    记录了工作和学习中一些杂碎的问题. 问题:RDP一直处于连接状态,除非重启 描述:表面看上去是应该在一定时间还连接不上,就让它断开.深层问题是,初次连接一个新的IP地址,Win7以上的系统,会有个CA ...

  7. 团队 / Staff_VidaMiaTangoClub_新浪博客

    团队 / Staff_VidaMiaTangoClub_新浪博客 团队 / Staff

  8. Android Content Provider的启动过程源码分析

    本文參考Android应用程序组件Content Provider的启动过程源码分析http://blog.csdn.net/luoshengyang/article/details/6963418和 ...

  9. 透过表象看本质!?之三——Kalman滤波

    数据拟合能够估计出数据变化的趋势,另外一个同等重要的应用是如何利用这一趋势,预测下一时刻数据可能的值.通俗点儿说,你观察苍蝇(蚊子,蜜蜂)飞了几秒,你也许会想“它下一个时刻可能在哪儿”,“呈现出什么样 ...

  10. Git flow 的流程

    Git flow 的流程与参考   Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示 ...