思路:点击当前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. 爬虫学习(十四)——xpath项目实践

    import osimport timeimport urllib.requestimport urllib.parsefrom lxml import etree # 构建面向对象的代码方式clas ...

  2. SpringMVC-实现PUT请求上传文件(转)

    因为在图片上传的时候使用的是二进制的方式上传,所以使用隐藏域进行方法转换方式失效,转方法: https://www.cnblogs.com/morethink/p/6378015.html 可是后来我 ...

  3. 你们知道SEO每天都在做什么吗?

    医院也有做SEO的,专门负责医院网站优化工作,那么医院的SEO每天都做什么呢?偶然见到一篇文章,转载来分享给大家.感觉写的很实在. 大凡做seo工作的人都知道seo工作者每天都要做大量的外链,像有些个 ...

  4. JZOJ 5919. 逛公园

    Description            琥珀色黄昏像糖在很美的远方,思念跟影子在傍晚一起被拉长……Description      小 B 带着 GF 去逛公园,公园一共有 n 个景点,标号为 ...

  5. C语言实例解析精粹学习笔记——26

    实例26:阿拉伯数字转换为罗马数字,将一个整数n(1~9999)转换为罗马数字,其中数字和罗马数字的对应关系如下: 原书中的开发环境很老,我也没有花心思去研究.自己在codeblocks中进行开发的, ...

  6. P1582倒水 位运算

    题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个瓶子的水全部倒 ...

  7. 匿名函数lambda python

    lambda 的主体是一个表达式,不是一个代码块lambda 只有一行,仅仅能在lambda表达式种封装有限的逻辑进去匿名函数:需要一个函数,而又不想动脑筋去想名字 #普通函数的定义 def f(a, ...

  8. ### Cause: java.lang.reflect.UndeclaredThrowableException

    ### Cause: java.lang.reflect.UndeclaredThrowableException Caused by: org.apache.ibatis.exceptions.Pe ...

  9. [BZOJ1045] [HAOI2008] 糖果传递 (中位数)

    Description 题目链接 Solution 这题跟数列的中位数有关, 具体证明见刘汝佳的蓝皮书里 Code #include <cstdio> #include <algor ...

  10. python几个复习例子

    1.实现1-100的所有的和,程序代码如下: sum = 0 for i in xrange(1,101): sum +=i print (sum) 程序运行结果: 2.实现1-500所有奇数的和,程 ...