<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    ul>li {

      background-color: #999;

      margin: 20px;

    }

    ul>li.active{

      background-color: greenyellow;

    }

  </style>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

  <ul id="demo">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

  </ul>

</body>

<script>

  $(function(){

    $('#demo>li').on('click',function(){

      $(this).addClass('active');

      $(this).siblings().removeClass('active');

    })

  })

</script>

</html>

jq切换选择项的更多相关文章

  1. Js获取下拉框当前选择项的文本和值

    现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法: <span class="red">* </span> 地       区: ...

  2. magento currency magento头部增加币种切换选择

    magento currency magento头部增加币种切换选择 默认magento 货币选择切换是显示在左边 有时候我们需要让其显示在头部 Step 1. Create a new file a ...

  3. Chosen中选择项的更新

    Chosen 选择项的动态修改/更新 如果你需要去动态更新select选择框里的选择项,你需要通知Chosen去响应这个变动,你需要在这个选项框是触发一个"liszt:updated&quo ...

  4. iOS开发——UI篇&下拉弹出列表选择项效果

    下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod  ...

  5. C# winform 选择项 省市连动

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. selenium 定位input输入框下的选择项

    今天的问题与下图中的类似 这是一个input型输入框,当我点击或输入值时,输入框下方会显示选择项帮助快速输入,代码如下: <input class="v-input some" ...

  7. CentOS6.9-zabbix3.2启动失败原因及页面没有mysql选择项

     环境内核信息: [root@zabbix- ~]# uname -a Linux lodboyedu- -.el6.x86_64 # SMP Tue Mar :: UTC x86_64 x86_64 ...

  8. WPF中使用后台代码来控制TreeView的选择项（SelectedItem）以及展开节点操作

    首先为TreeView控件制作一个Style: <Style x:Key="LibraryTreeViewItemStyle" TargetType="{x:Typ ...

  9. springMVC 复选框带有选择项记忆功能的处理

    前言:由于jsp管理页面经常会遇到复选框提交到JAVA后台,后台处理逻辑完成后又返回到jsp页面,此时需要记住jsp页面提交时复选框的选择状态,故编写此功能! 一.复选框的初始化 1.1.jsp页面 ...

随机推荐

  1. hadoop 配置问题以及HDFS下如何读写文件

    辛辛苦苦学两年 ,一举回到解放前!!! 大数据开始学真的头疼 关键是linux你玩的不6 唉难受 hadoop 配置参见博客 http://dblab.xmu.edu.cn/blog/install- ...

  2. MQTT 协议学习：004-MQTT建立通信与 CONNECT 、CONNACK 报文

    背景 上一讲 MQTT 协议学习:通信报文的构成介绍了在MQTT通信中,各报文的通信流程:从本讲开始,我们开始介绍实际中使用的报文,以及它们的组成. CONNECT - 连接请求 报文 客户端到服务端 ...

  3. word中替换内容

    参考了一篇文章 然后做了如下修改  用python的win32com模块替换word中的文字搞定批量打印奖状 python 操作 office python操作word # -*- coding: u ...

  4. 一百一十三、SAP的SCAT录屏操作，类似按键精灵可用于批量修改数据

    一.输入事务代码SCAT,输入Z开头的程序名,点击左上角的新建图标 二.输入标题和模块名 三.保存为本地对象 四.包属性修改为CATT,然后保存 五.可以看到我们新建的一条内容,点击小铅笔修改 六.点 ...

  5. 新手学Java，有哪些入门知识点？

    很多小伙伴们在刚接触Java的时候,会有些迷茫,不知道该从哪里入手,不管是做前端还是后端,程序员都会用到JAVA,那该掌握哪些必要的基础知识呢.今天就跟大家分享新手学Java,有哪些入门知识点? 下面 ...

  6. 用Git管理项目进行版本控制

    一.安装 1.1windows 要在Windows系统中安装Git,请访问http://msysgit.github.io/,并单击Download.安装. 1.2 在 Linux 系统中安装 Git ...

  7. js原型链理解(3)--构造借用继承

    构造借用(constructor strealing) 1.为什么已经存在原型链继承还要去使用构造借用 首先看一下这个例子 function Super(){ this.sets = [0,1,2]; ...

  8. OpenCV学习日志：计算机视觉资源汇总

    1.1 重要会议 (1)机器视觉重要会议 CVPR:Conferenceon Computer Vision and Pattern Recognition, IEEE, 五星 ICCV:Intern ...

  9. 面向对象-接口(interface)实战案例

    面向对象-接口(interface)实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.接口(interface)概述 1>.接口的语法格式 接口时抽象类的一种特殊体 ...

  10. UVA - 11491 Erasing and Winning(奖品的价值)(贪心)

    题意:有一个n位整数(不以0开头),要求删除其中的d个数字,使结果尽量大.(1<=d<n<=10^5) 分析: 1.从头扫一遍,如果当前填的数字小于n-d,则将当前数字填上. 2.如 ...