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();/ ...
随机推荐
- [转]Centos 6.5 优化 一些基础优化和安全设置
关于CentOS服务器的优化下文作为参考. 本文 centos 6.5 优化 的项有18处: 1.centos6.5最小化安装后启动网卡2.ifconfig查询IP进行SSH链接3.更新系统源并且升级 ...
- jsp页面格式化数字或时间
Tags fmt:requestEncoding fmt:setLocale fmt:timeZone fmt:setTimeZone fmt:bundle fmt:setBundle fmt:m ...
- RESTful最佳实践之基于 jersey 的增删改查
jersey-rest-demo 增删改查 项目地址:https://github.com/CoderDream/jersey-rest-demo 源代码:http://download.csdn.n ...
- DNS与网站优化
点就出现了这样的问题,导致了几小时的访问失败,所以选择优秀的DNS服务器势必关系网站发展的生死存亡.本文做以下分析. 选择良好的DNS服务器要从选择域名注册商说起,在注册域名时多数人看中的仅仅 ...
- poj3070 Fibonacci 矩阵快速幂
学了线代之后 终于明白了矩阵的乘法.. 于是 第一道矩阵快速幂.. 实在是太水了... 这差不多是个模板了 #include <cstdlib> #include <cstring& ...
- poj 1182食物链(并查集)
算法思路:把那些确定了相对关系的节点放在同一棵树里(可以同时存在多棵树,单独每棵树中节点的相对关系确定),每个节点对应的 v[] 值记录他与根节点的关系( 0:同类: 1:根吃他: 2:他吃根 ).当 ...
- 集群安装配置Hadoop具体图解
集群安装配置Hadoop 集群节点:node4.node5.node6.node7.node8. 详细架构: node4 Namenode,secondnamenode,jobtracker node ...
- WinForm中嵌入WebBrowser,并且支持C#和JS方法的相互调用
纯粹WinForm界面不够友好,实现数据复杂度高的处理有些力不从心,所以看了看api以后决定用html来做. 我的wlw的代码插件不是很好用,大家凑合看吧 类前说明引用和权限 1: [Permissi ...
- System.gc
Java中的内存分配是随着new一个新的对象来实现的,这个很简单,而且也还是有一些可以“改进”内存回收的机制的,其中最显眼的就是这个System.gc()函数. 乍一看这个函数似乎是可以进行垃圾回收的 ...
- SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
问题的原因是无法找到org.slf4j.impl.StaticLoggerBinder,我找了一下,确实没有该类,网上搜了一下下面是官方的解答http://www.slf4j.org/codes.ht ...