思路:点击当前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一致性读原来是有条件的

    众所周知,在设定了隔离等级为Repeatable Read及以上时,InnoDB 可以实现数据的一致性读.换句话来说,就是事务执行的任意时刻,读取到的数据是同一个快照,不会受到其他事务的更新影响. 以 ...

  2. vue本人常用插件汇总(常更新)

    1. 移动端UI插件 mint-ui http://mint-ui.github.io/#!/zh-cn 2.vue状态管理vuex,持久化插件:vuex-persist https://github ...

  3. asp.net高并发网站解决方案【未完成版本】

    场景:假设现在是一个电商网站,今天要举办活动,有10个商品低价销售,但是会来抢购的人会特别多,最后只有十个人可以成功的买到商品   明确2个问题 1.访问量:抢票时间断用户访问量 2.并发:1秒内请求 ...

  4. hosts 文件的位置及作用

    一.位置 1.Window系统位置 C:\Windows\System32\drivers\etc 2.Linux系统位置 /etc/hosts 二.作用 综述:Hosts文件中指定了域名和IP地址的 ...

  5. P1414 又是毕业季II (数学?

    题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业晚会上,相信,这一定 ...

  6. 初见spark-04(高级算子)

    今天,这个是spark的高级算子的讲解的最后一个章节,今天我们来介绍几个简单的算子, countByKey val rdd1 = sc.parallelize(List(("a", ...

  7. Oozie 实战之 shell

    说明:使用 shell action 执行 shell 脚本 hive-select-test.sh 来通过已经配置好的 Hive -f 来执行 HQL 查询脚本文件 select.sql 1.创建脚 ...

  8. TouTiao开源项目 分析笔记12 从总体到局部 构建视频主页面

    1.构建视频主列表的整体碎片VideoTabLayout 1.1.首先创建一个VideoTabLayout package com.jasonjan.headnews.module.video; im ...

  9. 20145202马超 《Java程序设计》第八周学习总结

    第十四章 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),rewind(),flip(),compact()等高级操作. 想要取得channel的 ...

  10. 如何高性能的给 UIImageView 加个圆角?

    不好的解决方案 使用下面的方式会强制Core Animation提前渲染屏幕的离屏绘制, 而离屏绘制就会给性能带来负面影响,会有卡顿的现象出现 self.view.layer.cornerRadius ...