<!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. 无法识别的配置节 system.webServer

    Web.config文件里面加入 <configSections> <section name="system.webServer" type="Sys ...

  2. C++连接sqlite数据库的坑

    新的第一次用vs2013搞 C++连接sqlite数据库,遇到了很多问题,我也不搞不懂~~~下面写点小体会 首先: 你要先配置好sqlite的环境 参考链接: https://blog.csdn.ne ...

  3. mysql基本知识的总结

    Mysql基本sql知识 Navicat快捷方式: 选中当前行 在行尾:shift+home 在行首:shift+end 执行当前行:ctrl+shift+R 复制当前行:ctrl+D 显示所有数据库 ...

  4. [ cocos2d-JS ] 启动项目

    1, 打开windows命令行 2, cd 到项目的文件夹 3, 执行 cocos run -p web

  5. 指令——mv

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. 指令:mv   (move,移动,剪切) 作用 ...

  6. python csv

    Python 读取csv的某行 Python 读取csv的某列 Python写了一个可以提取csv任一列的代码,欢迎使用.Github链接 两个list写入csv文件 column1,column2 ...

  7. 十五、JavaScript之除法

    一.代码如下 二.执行效果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" cont ...

  8. 使用HttpURLConnection方式访问接口

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  9. T_SQL 获取系统当前时间与明天时间的两种格式

    --获取系统明天的时间 select CONVERT(nvarchar(20),dateadd(d,1,getdate()),120)         2017-01-21 15:04:10 sele ...

  10. 【LeetCode】206. 反转链表

    题目 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 进阶: 你可 ...