<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
ul{
list-style: none;
}
ul li{
float: left;
padding: 10px;
border: 1px solid black;
margin-right: 10px;
}
.active{
background: green;
color: white;
}
</style>
<div class="delivery-tab">
<ul>
<li class="active">普通</li>
<li>文件</li>
<li>易碎</li>
<li>数码</li>
<li>美食</li>
<li>鲜花</li>
<li>蛋糕</li>
<li>生鲜</li>
</ul>
</div>
<script>
$('.delivery-tab ul li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$(this).siblings().children('input').removeAttr('checked', true);
});
</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. Chrome Stylist 插件 (CSS备份)

    Stylist 插件还是很好用的,可以给网站自定义CSS样式,(还有个插件叫"油猴子",可以给网页加载自定义JS): 不过麻烦的是,现在的最新版360浏览器不能显示这个插件(这个浏 ...

  2. SDL 2.0 如何在 windows 上使用?

    https://wiki.libsdl.org/APIByCategory http://adolfans.github.io/sdltutorialcn/sdl-2-dot-0-tutorial-i ...

  3. Redis笔记2-发布订阅

    发布/订阅"(publish/subscribe)模式可以实现进程间通信,订阅者可以订阅一个或多个频道(channel),而发布者可以向指定的频道发送消息,所有订阅次频道的订阅者都会收到次消 ...

  4. jQuery手机发送验证码倒计时代码

    <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type=&q ...

  5. 判断ios或者android

    <script type="text/javascript"> $(function () { // android和iso下载链接 var u = navigator ...

  6. Python-ORM之sqlalchemy的简单使用

    ORM之sqlalchemy 基础章节 使用SQLAlchemy链接数据库 from sqlalchemy import create_engine from sqlalchemy.ext.decla ...

  7. 类似fabric主机管理demo

    类似于fabric的主机管理系统 可以批量对主机进行操作 批量上传文件 批量下载文件 批量执行命令 demo代码 #!/usr/bin/env python # -*- coding:utf-8 -* ...

  8. ORACLE不可见索引(Invisible Indexes)

    不可见索引概念 不可见索引(Invisible Index)是ORACLE 11g引入的新特性.不可见索引是会被优化器忽略的不可见索引,除非在会话或系统级别上将OPTIMIZER_USE_INVISI ...

  9. TI Davinci DM6446开发攻略——根文件系统的裁剪和移植

    一.补充文件系统知识 Linux根文件系统是存放tool软件.lib文件.script(脚本).配置文件.其他特殊文件.自己开发的应用程序的地方.嵌入式linux的根文件系统rootfs就像windo ...

  10. V4L2驱动的移植与应用(二)

    二.V4L2的应用 下面简单介绍一下V4L2驱动的应用流程. 1.  视频采集的基本流程 一般的,视频采集都有如下流程: 2.  打开视频设备 在V4L2中,视频设备被看做一个文件.使用open函数打 ...