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.分析原因:因为模 ...
随机推荐
- JDK1.8简单配置环境变量---两步曲
鄙人最近重新装完系统之后,在安装和配置jdk1.8的时候,发现网上许多教程配置jdk环境变量时都还在沿用传统的方式配置,但是随着技术的更新,完全没有必要那么麻烦了. 下载和安装jdk的教程,在这里就不 ...
- expect配合shell 实现自动分发秘钥文件
expect使用场景 有时候需要批量地执行一些操作,或者执行自动化的操作的时候,有些指令需要交互式地进行这就会有很多麻烦,linux下有一个程序交expect,它可以模拟键盘输入文本,省去人工干预交互 ...
- Java高并发之线程基本操作
结合上一篇同步异步,这篇理解线程操作. 1.新建线程.不止thread和runnable,Callable和Future了解一下 package com.thread; import java.tex ...
- nginx配置安装
先安装pcrepcre作用是让Nginx支持Rewrite功能下载地址:https://sourceforge.net/projects/pcre/files/pcre/,选择最新版本进行下载下载之后 ...
- 小程序里面使用wxParse解析富文本导致页面空白等
在部分安卓手机上会出现白屏的情况且有些ios手机上图文混排上,图片显示不出问题 解决:把插件里面的console.dir去掉即可(原因在于安卓手机无法解析console.dir) 有些图片解析出来下面 ...
- 为什么 redis 单线程却能支撑高并发
redis 和 memcached 有什么区别?redis 的线程模型是什么?为什么 redis 单线程却能支撑高并发? 这个是问 redis 的时候,最基本的问题吧,redis 最基本的一个内部原理 ...
- 【Hadoop/Hive/mapreduce】系列之如何删除HIVE 表格的分区
今天的一个业务场景就是要把三年的数据从第一天不停的融合起来,每一天作为表格一个新的分区.由于空间有限,数据量很大,可能每天数据都是几十个G的大小.所以我需要做的一点就是在融合这一天之后,删除一天的分区 ...
- easyPOI导出excel报错
http-nio--exec- at :: - excel cell export error ,data is :com.jn.ssr.superrescue.web.qc.dto.Automati ...
- python里面list()函数
1. list() 方法用于将元组转换为列表. 元组与列表是非常类似的,区别在于元组的元素值不能修改,元组是放在括号中,列表是放于方括号中. 2. python里面的变量不用提前声明.
- 使用Matrix-tree与它的行列式来解决生成树计数问题
我又把Matrix写错啦 这东西讲课的时候竟然一笔带过了,淦 好吧这东西我不会证 那我们来愉快的看结论吧 啦啦啦 预备工作 你有一个 $ n $ 个点的图 比如说 5 /|\ / | \ 2--1-- ...