思路:点击当前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. Java - 关于基础数据类型的形参和返回值

    1. 当基础数据类型被当作形参时,最好使用其包装类,因为这样可方便调用者传参(基础数据类型亦或是其包装类都可)   2. 当基础数据类型被当作返回值时,最好使用原型,因为这样可以方便调用者接收返回值( ...

  2. Spring入门注解版

    参照博文Spring入门一,以理解注解的含义. 项目结构: 实现类:SpringHelloWorld package com.yibai.spring.helloworld.impl; import ...

  3. JAVAOOP接口

    狭义接口:用来约束实现类中方法的长相的. 广义接口:已将编写好的功能. 1.接口中的方法都是抽象方法,没有方法体,必须被子类重写 2.java的接口变量都是静态常量 3.接口方法只不过是用来约束现实类 ...

  4. (转)想从事游戏开发,1 年内能精通 C++ 吗,还需要学习什么?

    本人大约从20多年前开始学习及使用C++,但仍未达到我认为「精通」的阶段,甚至对于C++11的各种新特性也未掌握.然而因为我是在读书时自学C++的,也是游戏程序员(原问题中提到题主想从事游戏开发),觉 ...

  5. HTML常用标签用法及实例

    HTML常用标签用法及实例1.<!--1.注释-->2.<!--2.DOCTPYE 声明文档类型-->3.<!--3.a--> <a href="h ...

  6. 图解HTTP总结(6)——HTTP首部

    HTTP报文首部 HTTP 协议的请求和响应报文中必定包含 HTTP 首部. 首部内容为客户端和服务器分别处理请求和响应提供所需要的信息. 对于客户端用户来说, 这些信息中的大部分内容都无须亲自查看. ...

  7. python中全局变量和局部变量

    例1: a = 100 #定义全局变量a def test1(): print(a) #此处a为全局变量 def test2(a):#此处a为局部变量 print(a)#此处a为局部变量 test1( ...

  8. POJ-2251 三维迷宫

    题目大意:给一个三维图,可以前后左右上下6种走法,走一步1分钟,求最少时间(其实就是最短路) 分析:这里与二维迷宫是一样的,只是多了2个方向可走,BFS就行(注意到DFS的话复杂度为O(6^n)肯定会 ...

  9. 笔记-python-standard library-11.2 os.path

    笔记-python-standard library-11.2 os.path 1.      os.path Source code: Lib/posixpath.py (for POSIX), L ...

  10. NPM安装vue-cli,并创建vue+webpack项目模板

    1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install  估计会非常慢,我们可以使用淘宝NPM镜像下载安装:htt ...