1. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  2. <style>
  3. ul{
  4. list-style: none;
  5. }
  6. ul li{
  7. float: left;
  8. padding: 10px;
  9. border: 1px solid black;
  10. margin-right: 10px;
  11. }
  12. .active{
  13. background: green;
  14. color: white;
  15. }
  16. </style>
  17. <div class="delivery-tab">
  18. <ul>
  19. <li class="active">普通</li>
  20. <li>文件</li>
  21. <li>易碎</li>
  22. <li>数码</li>
  23. <li>美食</li>
  24. <li>鲜花</li>
  25. <li>蛋糕</li>
  26. <li>生鲜</li>
  27. </ul>
  28. </div>
  29. <script>
  30. $('.delivery-tab ul li').click(function () {
  31. $(this).addClass('active').siblings().removeClass('active');
  32. $(this).siblings().children('input').removeAttr('checked', true);
  33. });
  34. </script>

jquery切换的更多相关文章

  1. jQuery切换网页皮肤保存到Cookie实例

    效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  2. jquery切换tab标签例子

    之前做了一个简单的小效果,使用jquery方式,让tab标签切换,效果如下 代码其实很简单,首先先把代码分享给大家,代码如下 var shoptoggle = $('.shoptoggle .shop ...

  3. jQuery切换网页皮肤并保存到Cookie示例代码

    经过使用,靠谱! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  4. jQuery切换事件

    有html页面内容如下: <body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1" ...

  5. jQuery 切换图片(图标)效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery——切换toggle

    toggle()-----显示隐藏 toggleClass-------添加类或者删除类 <!DOCTYPE html> <html lang="en"> ...

  7. jquery切换class

    <ul class="nva_sele_txt" id="">            <a href="#" class= ...

  8. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  9. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

随机推荐

  1. dnspython模块安装

    wget  http://www.dnspython.org/kits/1.12.0/dnspython-1.12.0.tar.gz tar -zxvf dnspython-1.12.0.tar.gz ...

  2. JetBrains Rider 破解 (ideaIU等等开发工具都通用)2018-02-27

    贴一下Rider下载地址:(下载不了可以用百度云离线下载) Win:https://download.jetbrains.com/resharper/JetBrains.Rider-2017.3.1. ...

  3. linux磁盘及分区详解

    1.Linux 分区简介 1.1 主分区 vs 扩展分区 硬盘分区表中最多能存储四个分区,但我们实际使用时一般只分为两个分区,一个是主分区(Primary Partion)一个是扩展分区(extend ...

  4. Python自动化--语言基础5--面向对象、迭代器、range和切片的区分

    面向对象 一.面向对象代码示例: 1 class Test(): #类的定义 2 car = "buick" #类变量,定义在类里方法外,可被对象直接调用,具有全局效果 3 def ...

  5. 标准Http协议的六种请求方法详解

    标准Http协议支持六种请求方法,即: 1.GET 2.POST 3.PUT 4.Delete 5.HEAD 6.Options 但其实我们大部分情况下只用到了GET和POST.如果想设计一个符合RE ...

  6. Springmvc 中org.springframework.http.converter.json.MappingJackson2HttpMessageConverter依赖jackson包

    1,问题详情:Spring使用4.3.5.Release版本后 在SpringMvc配置文件中配置json 解析器后出现报错信息 [org.springframework.web.context.Co ...

  7. Yii2数据库操作再总结

    User::find()->all(); 此方法返回所有数据:User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find()->wh ...

  8. Python 关于super 的 用法和原理(挖坑)

    一.前言 Python 面向对象中有继承这个概念,初学时感觉很牛逼,里面也有个super类,经常见到,最近做一些题才算是理解了.特地记录分享给后来研究的小伙伴,毕竟现在小学生都开始学了(滑稽脸) 二. ...

  9. LOJ6002 - 「网络流 24 题」最小路径覆盖

    原题链接 Description 求一个DAG的最小路径覆盖,并输出一种方案. Solution 模板题啦~ Code //「网络流 24 题」最小路径覆盖 #include <cstdio&g ...

  10. 为什么在Python里推荐使用多进程而不是多线程

    转载  http://bbs.51cto.com/thread-1349105-1.html 最近在看Python的多线程,经常我们会听到老手说:"Python下多线程是鸡肋,推荐使用多进程 ...