思路:点击当前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. MySQL5.6基于mysql-proxy实现读写分离

    已经搭建好MySQL主从架构 10.205.22.185 #mysql-proxy 10.205.22.186 #master 10.205.22.187 #slave 1.安装mysql-proxy ...

  2. JAVA / MySql 编程——第二章 初始MySQL

    1. MySQL:        ●  MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司.            MySQL最流行的关系型数据库管理系统, ...

  3. JavaScript---DOM对象(DHTML)

    1.什么是DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本 ...

  4. nuxt generate静态化后回退问题

    之前线上的项目是nuxt build后的项目发布在服务器上,pm2来管理node的进程,nuxt还是运行在node的环境里. 这个方案用了半年左右,访问速度什么的确实很快,pm2管理下的node在wi ...

  5. chorme浏览器不支持audio/video中的autoplay属性的解决方法

    在chrome 浏览器中输入:chrome://flags 再搜索audio,找到Autoplay policy 再在右侧的选项中设置为 no user gesture is required 即可

  6. G - Dreamoon and NightMarket Gym - 101234G 优先队列+思路

    题目:题目链接 题意:给出n种食物,食物有自己的价格并且可以自由搭配,每天吃之前没吃过的花费最少的搭配,问第k天的花费. 思路:第k小我们考虑用优先队列处理,虽然n比较大,但由于1 ≤ K ≤ min ...

  7. java变量、数据类型

    public class Test { public static void main(String[] args) { //变量 //数据类型 变量名; //基本数据类型: //一个字节8位 //整 ...

  8. JVM——九大工具助你玩转Java性能优化

    本文转载自 http://www.importnew.com/12324.html 本文由 ImportNew - 陈 晓舜 翻译自 idrsolutions.欢迎加入翻译小组.转载请参见文章末尾的要 ...

  9. 19,django组件之contenttype(一)

    django组件之contenttype(一) 方式1:适用于1张表和另一张表要关联的时候. 1.路飞学成表设计: 2.将2个价格策略表合并1张表. 3.如果再加一张表,那价格策略表的表结构会发生改变 ...

  10. 「微信小程序免费辅导教程」26,基础内容组件rich-text体验