html li css选中状态切换
思路:点击当前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选中状态切换的更多相关文章
- ios中UIButton选中状态切换
关于UIButton的事件枚举有许多,平时用的少所以很多的都不是很清楚,今天了解了下,看了以前的代码,觉得在UIButton选中时操作写了许多冗余代码,而忽略了UIButton一个很重要的属性,如下: ...
- iOS UIButton选中状态切换
UIButton*payBtn = [UIButtonbuttonWithType:UIButtonTypeCustom]; payBtn.frame=CGRectMake(size.width-24 ...
- jq 实现切换菜单选中状态
点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性. html代码 <div class="layui ...
- # li鼠标移入移出,点击,变背景色,变checkbox选中状态
移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...
- RecyclerViewSelectableAdapterDemo【封装BaseSelectableAdapter用于多选、单选,以及切换选中状态等功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录封装单选.多选.切换选中状态的BaseSelectableAdapter基类,配合Recyclerview使用. 注意:此Dem ...
- vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换
elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的, ...
- Android 手机卫士--选中SettingItemView条目状态切换
本文实现上篇文章中自定义组合控件中相关方法. checkBox是否选中,决定SettingItemView是否开启. 首先创建一个方法用于判断checkbox是否开启 /** * 判断是否开启的方法 ...
- Taro button点击切换选中状态
1.引入组件 2.state中设置选中状态 // button按钮的默认选中,0代表选中 state = { currentIndex: 0 } 3.设置class的样式,点击更改选中 selectN ...
- LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
随机推荐
- Spring Cloud 入门 Consul-Client服务提供
前面介绍了 Rureka Client服务提供, 只需要改pom.xml部分内容 1.pom.xml <?xml version="1.0" encoding="U ...
- 详解MessageBox(),MsgBox函数的正确使用
//或者使用chr(13),chr(10)效果一样 MsgBox "a"&chr(13)&"b"&chr(10)&"c ...
- c#常用数据结构解析【转载】
引用:http://blog.csdn.net/suifcd/article/details/42869341 前言:可能去过小匹夫博客的盆油们读过这篇对于数据结构的总结,但是小匹夫当时写那篇文章的时 ...
- zookeeper集群(二)
经过前一篇文章<zookeeper伪集群一>的阅读,相信大家对zookeeper集群已经有一定的了解了,接下来我们再谈谈zookeeper真集群.其实真集群和伪集群还是有很多相似的部分的, ...
- 海康威视面试python后端题
1. 请简述三次握手和四次挥手: 答:首先TCP是传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接,在建立TCP连接时,需要客户端和服务器总共发送3个包. 三次握手的目的是连接服务器的指 ...
- ln -s 软链接产生Too many levels of symbolic links错误
不能使用相对路径, ln -s ./cmake /usr/bin/ 而是要 ln -s /usr/local/bin/cmake /usr/bin/
- 2016 ACM-ICPC Asia China-Final D 二分
题意:一共有N个冰淇淋球,做一个冰淇淋需要K个球,并且由于稳定性,这K个球还必须满足上下相邻的下面比上面大至少两倍.先给出N个球的质量,问最多能做出多少个冰淇淋? 思路:二分答案并对其检验. 检验标准 ...
- 笔记-docker-2安装(centos6.5环境)
笔记-docker-2安装(centos6.5环境) 1. centos6.5安装docker 1.1. 升级内核 安装docker,官方文档要求linux kernel至少3.8以上 ...
- 19,django组件之contenttype(一)
django组件之contenttype(一) 方式1:适用于1张表和另一张表要关联的时候. 1.路飞学成表设计: 2.将2个价格策略表合并1张表. 3.如果再加一张表,那价格策略表的表结构会发生改变 ...
- web在线调试
xx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h ...