思路:点击当前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');                            // 添加当前元素的样式

    });
});

jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class的更多相关文章

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

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

  2. ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  3. 都div在所有li的html()值被设置&quot;哈哈&quot;,当点击设置&quot;我被点击&quot;,其余的还是不点击设置“哈哈”

    <1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  5. jQuery 学习笔记2 点击时弹出一个对话框

    上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  6. JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  7. 点击li ,父辈出现; 子级,子辈不出现. prevUntil ---> 前面多个, 截止到 截止元素 , prev([expr]) --> 前面一个.

    要求: 1. 点击第一级   [1知识点] 的时候,  [1知识点] 前有 圆圈. 点击 第二级 [1-1知识点, 1-2知识点, 1-3知识点] 时 , [1知识点]出现 圆圈. 2. 点击 第一级 ...

  8. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项,给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类,给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  9. 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)

    面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...

随机推荐

  1. css文件放在头部的原因

    我在博问上发的一个这个问题 然后有人这样回复我的 我感觉很有道理的样子 所以我放上来了 这样会先加载css的样式,在渲染dom的时候已经知道了自己的样式了,所以一次渲染成功 如果css放在底部,那么需 ...

  2. 解决错误:此用户名包含无效字符,请输入有效的用户名。wordpress不能注册中文用户名的问题

    wordpress在默认情况下不支持中文用户名,就是在后台添加用户的时候,如果用户名包含中文,则显示”错误:此用户名包含无效字符,请输入有效的用户名.”如何解决这个问题呢? 不用插件的话就需要修改一个 ...

  3. echarts官网上的动态加载数据bug被我解决。咳咳/。

    又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...

  4. jquery.validate验证表单配合回调提交和h5.storage本地保存笔记

    表单验证插件我使用:jquery.validate.js 支持中文提示,可扩展性强!教程地址 本地保存状态信息使用:h5提供的storage,浏览器支持5m的存储量,存储类型必须是string类型,并 ...

  5. 解决CentOS7 firefox崩溃问题

    现象:我在博客园写随笔的时候插入图片,每次都会崩溃,百度了好久,发现这个方法还挺好用的 在终端敲入如下命令: setsebool -P unconfined_mozilla_plugin_transi ...

  6. gitlab备份与恢复

    (1)备份 1.创建备份目录,并授权 mkdir /data/backups/gitlab -pv chown -R git.git /data 2.修改gitlab配置 vim /etc/gitla ...

  7. ubuntu要安装新软件,已有deb安装包

    如果ubuntu要安装新软件,已有deb安装包(例如:iptux.deb),但是无法登录到桌面环境.那该怎么安装?答案是:使用dpkg命令.dpkg命令常用格式如下:sudo dpkg -I iptu ...

  8. 多线程下,Python Sqlite3报[SQLite objects created in a thread can only be used...]问题

    明明加了锁保护,还是出了下面的问题 ProgrammingError: SQLite objects created in a thread can only be used in that same ...

  9. TYVJ2002 扑克牌

    卢克生日那天,汉来找卢克玩扑克牌,玩着玩着汉觉得太没意思了,于是决定给卢克一个考验汉把一副扑克牌(54张)随机洗匀,倒扣着放成一摞.然后卢克从上往下一次翻开每张牌,每翻开一张黑桃,红桃,梅花或方块,就 ...

  10. Flask实战第68天:项目上线部署

    在开发机上的准备工作 1.确认项目没有bug 2.用pip freeze >requirements.txt将当前环境的包导出到requirements.txt文件中,方便部署的时候安装 3.将 ...