jquery切换
<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切换的更多相关文章
- jQuery切换网页皮肤保存到Cookie实例
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...
- jquery切换tab标签例子
之前做了一个简单的小效果,使用jquery方式,让tab标签切换,效果如下 代码其实很简单,首先先把代码分享给大家,代码如下 var shoptoggle = $('.shoptoggle .shop ...
- jQuery切换网页皮肤并保存到Cookie示例代码
经过使用,靠谱! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- jQuery切换事件
有html页面内容如下: <body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1" ...
- jQuery 切换图片(图标)效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery——切换toggle
toggle()-----显示隐藏 toggleClass-------添加类或者删除类 <!DOCTYPE html> <html lang="en"> ...
- jquery切换class
<ul class="nva_sele_txt" id=""> <a href="#" class= ...
- jQuery实现的鼠标滑过切换图片代码实例
jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
随机推荐
- NFS工作原理
很多同学都知道NFS的使用场景,也知道如何配置和使用,但对NFS的工作原理了解的很少. NFS是C/S模式,首先要有一台服务端跑NFS服务,然后各个客户端直接挂载共享目录使用.NFS服务本身不会监听端 ...
- PAT1118. Birds in Forest (并查集)
思路:并查集一套带走. AC代码 #include <stdio.h> #include <string.h> #include <algorithm> using ...
- UVALive - 3027 Corporative Network (并查集)
这题比较简单,注意路径压缩即可. AC代码 //#define LOCAL #include <stdio.h> #include <algorithm> using name ...
- hihoCoder 403 Forbidden 字典树
题意:给定个规则,个ip,问这些ip是否能和某个规则匹配,如果有多个规则,则匹配第一个.如果没能匹配成功,则认为是"allow",否则根据规则决定是"allow" ...
- Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
- kolla-ansible快速入门
kolla-ansible快速入门 kolla-ansible是一个结构相对简单的项目,它通过一个shell脚本,根据用户的参数,选择不同的playbook和不同的参数调用ansible-playbo ...
- ELK 经典用法—企业自定义日志手机切割和mysql模块
本文收录在Linux运维企业架构实战系列 一.收集切割公司自定义的日志 很多公司的日志并不是和服务默认的日志格式一致,因此,就需要我们来进行切割了. 1.需切割的日志示例 2018-02-24 11: ...
- 父页面(JSP页面)传参数到子页面(JSP页面)
父页面(JSP页面)传参数到子页面(JSP页面) 1.父页面传参数到子页面 //JavaScript代码 $.ajax({ type:"POST", uri:"../st ...
- 网页版Rstudio︱RStudio Server多人在线协作开发
网页版Rstudio︱RStudio Server多人在线协作开发 想了解一下RStudio Server,太给力的应用,可以说成是代码分布式运行,可以节省时间,放大空间. RStudio是一个非常优 ...
- Struts2实现文件上传(四)
Struts2实现文件上传 配置文件struts.xml <!-- /* * $Id: struts.xml 1364077 2012-07-21 12:57:02Z lukaszlenart ...