jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
思路:点击当前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?的更多相关文章
- jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...
- jQuery动态添加li标签并添加属性和绑定事件
代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...
- Html中解决点击 a 标签刷新的问题,实现点击时不刷新
Html中解决点击 a 标签刷新的问题 我们可以在 <a href=""></a>中,将地址属性href设置为“#” 例如 <a href=" ...
- html li标签前面添加图标三种方法
今天无聊写下这个例子,希望对初学者有帮助,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
- jquery轻松实现li标签上下滚动的原理
在网站上我们常看到有滚动的文字或者图片,比如消息提醒,新闻列表,等等.那么这些效果是怎么形成的呢?经过查阅,找到一种十分方便的写法,经过改良,得出我自己的终极版滚动效果. 我先写个布局吧 <di ...
- jquery模拟点击A标签的问题
我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久. 先看下边的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <htm ...
- js会飞的li标签
当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- jQuery基础之二(操作标签)
一:样式操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();/ ...
随机推荐
- 转:关于http server - 来自百度知道,留存备读
web server 目 录 1名词解释 2应用程序服务器与web服务器 2.1 Web服务器(Web Server) 2.2 带应用程序服务器的Web服务器 2.3 警告(caveats) ...
- java正则去掉小数点后多余0
需求:已知字符串为一数字字符形式,多为float,double转换过来,将其后多余的0与.去掉. package test; /** * 去掉多余的.与0 * @author Hust * @Time ...
- 在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编
在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编 ...
- Esper学习之五:EPL语法(一)
上篇说到了Esper的Context,要是不了解的同学请参看<Esper学习之四:Context>,看过的同学如果还是不理解的话可以给我评论,我将会尽可能的解答.之前有些同学问我Conte ...
- Bernstein polynomials
Bernstein多项式能够用来一致逼近闭区间上的连续函数. 对于[0,1]上的连续函数f(x),定义Bernstein多项式 B_n(f,x) = sum{k=0..n} f(k/n)C(k,n)t ...
- 谁是Docker的开发人员
由CHRIS DAWSON发表在thenewstack/DATA RESEARCH qianhen123/CHB译 我们分析了Docker的容器库并提出两个问题: 1.Docker的贡献者们感兴趣的其 ...
- HTTP协议之ETag字段
整理者:华科小涛:http://www.cnblogs.com/hust-ghtao/ 前段时间参加某公司的面试,问我ETag字段,当时说的不是很清楚,找了些资料,整理为此篇. 简单的说ETag即类似 ...
- SignalR 聊天室实例详解(服务器端推送版)
翻译自:http://www.codeproject.com/Articles/562023/Asp-Net-SignalR-Chat-Room (在这里可以下载到实例的源码) Asp.Net Si ...
- Azure 云 Web 应用程序
Azure 云 Web 应用程序 原文:Getting Started作者:Rick Anderson翻译:谢炀(Kiler)校对:孟帅洋(书缘).刘怡(AlexLEWIS).何镇汐 设置开发环境 安 ...
- 配置Eclipse使用外部Maven
当集成Maven时,Eclipse会安装上一个内嵌的Maven, 这个内嵌的Maven通常会比较新,但不一定很稳定,而且往往也会和命令行使用的Maven不是同一个版本.这里又会出现两个潜在的问题:首先 ...