<!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. 收藏！阿里云maven镜像配置文件

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  2. Linq----------if使用

    static void Main(string[] args) { "; "; var processid = "c8b79051249940acbeca5dd951d2 ...

  3. Ubuntu上安装tftp服务

    1. 安装 sudo apt install tftpd-hpa 2.设置工作目录 mkdir ~/tftpdroot tftpdroot 3.修改配置文件 sudo vi /etc/default/ ...

  4. php.laravel.部署

    Laravel 的部署 D  参考laravel-china的做 | 其他参考 | 重要的参考 | Nginx github | 如果想要ssl 啊

  5. 160-PHP 文本替换函数str_replace（一）

    <?php $str='Hello world!'; //定义源字符串 $search='o'; //定义将被替换的字符 $replace='O'; //定义替换的字符串 $res=str_re ...

  6. Android-寒假学习-阶段总结(20集)-口算测试APP

    说在前面: 1.视频教程:https://www.bilibili.com/video/av60445113/?spm_id_from=333.788.videocard.0 2.老师的源码:http ...

  7. CGridCtrl显示子控件 及事件

    m_Grid.SetCellType(row, , RUNTIME_CLASS(CGridCell)); m_Grid.SetItemText(row, , _T(")); m_Grid.S ...

  8. 国内OLED产业与三星到底是差之千里还是近在咫尺？

    此前,市面上几乎大部分智能手机搭载的刘海屏,都是来自三星的AMOLED屏幕.虽然三星总是被诟病为中国手机厂商提供的是"次品",不过没办法,OLED屏幕的核心技术.产能等都掌握在三星 ...

  9. 数据结构顺序表中Sqlist *L,&L,Sqlist *&L

    //定义顺序表L的结构体 typedef struct { Elemtype data[MaxSize]: int length; }SqList; //建立顺序表 void CreateList(S ...

  10. Day3-T1

    原题目 Describe:暴力出奇迹 [ 注意步长0.5!] code: #include<bits/stdc++.h> using namespace std; inline int r ...