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

  

html li css选中状态切换的更多相关文章

  1. ios中UIButton选中状态切换

    关于UIButton的事件枚举有许多,平时用的少所以很多的都不是很清楚,今天了解了下,看了以前的代码,觉得在UIButton选中时操作写了许多冗余代码,而忽略了UIButton一个很重要的属性,如下: ...

  2. iOS UIButton选中状态切换

    UIButton*payBtn = [UIButtonbuttonWithType:UIButtonTypeCustom]; payBtn.frame=CGRectMake(size.width-24 ...

  3. jq 实现切换菜单选中状态

    点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性. html代码 <div class="layui ...

  4. # li鼠标移入移出,点击,变背景色,变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  5. RecyclerViewSelectableAdapterDemo【封装BaseSelectableAdapter用于多选、单选,以及切换选中状态等功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录封装单选.多选.切换选中状态的BaseSelectableAdapter基类,配合Recyclerview使用. 注意:此Dem ...

  6. vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换

    elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的, ...

  7. Android 手机卫士--选中SettingItemView条目状态切换

    本文实现上篇文章中自定义组合控件中相关方法. checkBox是否选中,决定SettingItemView是否开启. 首先创建一个方法用于判断checkbox是否开启 /** * 判断是否开启的方法 ...

  8. Taro button点击切换选中状态

    1.引入组件 2.state中设置选中状态 // button按钮的默认选中,0代表选中 state = { currentIndex: 0 } 3.设置class的样式,点击更改选中 selectN ...

  9. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

随机推荐

  1. 【MySQL】使用SQL语句操作MySQL

    前言: MySQL在工作中是最常用的数据库,但在使用Django和Flask的时候,都是使用ORM进行操作,除了select语句外,其他的SQL语句操作MySQL的能力没有啥提高,为了解决这个问题, ...

  2. JavaScript---ECMA对象

    1.对象的概念及分类 1.1 ECMAScript中没有类,但定义了“对象”,逻辑上等价于其他程序设计语言中的类. var o = new Object(); 1.2 本地对象(native obje ...

  3. 关于IT人的一些消遣区

    https://www.csdn.net/http://www.51cto.com/http://bestcbooks.com/http://www.jobbole.com/http://www.co ...

  4. Apache安装之后,在浏览器输入ip无法访问

    博主本来在linux下面配置安装了apache,然后用浏览器输入ip却无法访问 就一直在想是不是dns无法解析的问题,最后才发现原来是防火墙的原因, 在linux下面 service iptables ...

  5. C语言字符篇(三)字符串比较函数

    #include <string.h>   int strcmp(const char *s1, const char *s2); 比较字符串s1和s2 int strncmp(const ...

  6. C语言进阶—— 逻辑运算符分析15

    印象中的逻辑运算符: ---学生:老师,在我的印象中,逻辑运算符用在条件判断的时候,真挺简单的,还有必要深究吗? ---老师:逻辑运算符确实在条件判断的时候用的比较多,但是并不能说简单... 请思考下 ...

  7. git的使用入门

    写作目的: 快速的上手git版本控制+github神器进行基本的版本同步操作. 怎么做? 对于任意一个代码项目,使用git_bash进入到代码目录 如果没有进行过初始化操作:应当使用git init  ...

  8. 清空Fragment回退栈中某个Fragment之上的所有Fragment

    根据debug信息查看Fragment回退栈的情况,具体debug代码如下: int num = getActivity().getSupportFragmentManager().getBackSt ...

  9. 线程间通信(等待,唤醒)&Java中sleep()和wait()比较

    1.什么是线程间通信? 多个线程在处理同一资源,但是任务却不同. 生活中栗子:有一堆煤,有2辆车往里面送煤,有2辆车往外拉煤,这个煤就是同一资源,送煤和拉煤就是任务不同. 2.等待/唤醒机制. 涉及的 ...

  10. 能ping通网络,也正常连接,就是打不开网页,无法访问网络

    netsh winsock reset命令,作用是重置 Winsock 目录.如果一台机器上的Winsock协议配置有问题的话将会导致网络连接等问题,就需要用netsh winsock reset命令 ...