<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>jQuery仿京东商品选项卡切换</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".shop>ul:gt(0)").hide();//隐藏第一个之后的所有商品列表
$(".shopType li").hover(function(){
//为当前选项卡添加样式，移除其他选项卡样式
$(this).addClass("on").siblings().removeClass("on");
var index = $(this).index();//获取当前选项卡索引
$(".shop>ul").eq(index).css("display","block");//只显示当前选项卡对应的商品信息
$(".shop>ul").eq(index).siblings().css("display","none");
});
});
</script>
</head>
<body>
<div class="tabBox">
<div class="shopType">
<ul>
<li class="on">推荐商品</li>
<li>热门商品</li>
<li>猜您喜欢</li>
<li>热评商品</li>
<li>新品上架</li></ul>
</div>
<div class="shop">
<ul class="shopList">
<li>
<div class="shop-img">
<a href="">
<img src="images/1.1.jpg"></a>
</div>
<div class="shop-name">
<a href="">剃须刀</a></div>
<div class="shop-price">市场价：
<strong>￥399.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/1.2.jpg"></a>
</div>
<div class="shop-name">
<a href="">魔法涂鸦水画布</a></div>
<div class="shop-price">市场价：
<strong>￥99.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/1.3.jpg"></a>
</div>
<div class="shop-name">
<a href="">芭比娃娃</a></div>
<div class="shop-price">市场价：
<strong>￥199.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/1.4.jpg"></a>
</div>
<div class="shop-name">
<a href="">侧吸式油烟机</a></div>
<div class="shop-price">市场价：
<strong>￥1999.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/1.5.jpg"></a>
</div>
<div class="shop-name">
<a href=""> 扫地机器人</a></div>
<div class="shop-price">市场价：
<strong>￥709.00</strong></div>
</li>
</ul>
<ul class="shopList">
<li>
<div class="shop-img">
<a href="">
<img src="images/2.1.jpg"></a>
</div>
<div class="shop-name">
<a href="">星星抱枕</a></div>
<div class="shop-price">市场价：
<strong>￥99.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/2.2.jpg"></a>
</div>
<div class="shop-name">
<a href="">魔术扫把</a></div>
<div class="shop-price">市场价：
<strong>￥135.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/2.3.jpg"></a>
</div>
<div class="shop-name">
<a href="">零食收纳盒</a></div>
<div class="shop-price">市场价：
<strong>￥18.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/2.4.jpg"></a>
</div>
<div class="shop-name">
<a href="">四件套盆</a></div>
<div class="shop-price">市场价：
<strong>￥69.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/2.5.jpg"></a>
</div>
<div class="shop-name">
<a href="">调料盒套装</a></div>
<div class="shop-price">市场价：
<strong>￥22.00</strong></div>
</li>
</ul>
<ul class="shopList">
<li>
<div class="shop-img">
<a href="">
<img src="images/3.1.jpg"></a>
</div>
<div class="shop-name">
<a href="">智能手机</a></div>
<div class="shop-price">市场价：
<strong>￥1999.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/3.2.jpg"></a>
</div>
<div class="shop-name">
<a href="">C#开发实例大全·基础卷</a></div>
<div class="shop-price">市场价：
<strong>￥89.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/3.3.jpg"></a>
</div>
<div class="shop-name">
<a href="">一体机</a></div>
<div class="shop-price">市场价：
<strong>￥2699.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/3.4.jpg"></a>
</div>
<div class="shop-name">
<a href="">网络机顶盒</a></div>
<div class="shop-price">市场价：
<strong>￥269.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/3.5.jpg"></a>
</div>
<div class="shop-name">
<a href="">平板电脑</a></div>
<div class="shop-price">市场价：
<strong>￥3599.00</strong></div>
</li>
</ul>
<ul class="shopList">
<li>
<div class="shop-img">
<a href="">
<img src="images/4.1.jpg"></a>
</div>
<div class="shop-name">
<a href="">运动耳机</a></div>
<div class="shop-price">市场价：
<strong>￥138.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/4.2.jpg"></a>
</div>
<div class="shop-name">
<a href="">移动硬盘</a></div>
<div class="shop-price">市场价：
<strong>￥638.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/4.3.jpg"></a>
</div>
<div class="shop-name">
<a href="">自拍杆</a></div>
<div class="shop-price">市场价：
<strong>￥38.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/4.4.jpg"></a>
</div>
<div class="shop-name">
<a href="">超级飞侠变形机器人</a></div>
<div class="shop-price">市场价：
<strong>￥238.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/4.5.jpg"></a>
</div>
<div class="shop-name">
<a href="">拍立得相机</a></div>
<div class="shop-price">市场价：
<strong>￥938.00</strong></div>
</li>
</ul>
<ul class="shopList">
<li>
<div class="shop-img">
<a href="">
<img src="images/5.1.jpg"></a>
</div>
<div class="shop-name">
<a href="">多功能原汁机</a></div>
<div class="shop-price">市场价：
<strong>￥312.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/5.2.jpg"></a>
</div>
<div class="shop-name">
<a href="">对开式双门冰箱</a></div>
<div class="shop-price">市场价：
<strong>￥5112.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/5.3.jpg"></a>
</div>
<div class="shop-name">
<a href="">迷你仿真厨房过家家玩具</a></div>
<div class="shop-price">市场价：
<strong>￥112.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/5.4.jpg"></a>
</div>
<div class="shop-name">
<a href="">复古实木纸抽盒</a></div>
<div class="shop-price">市场价：
<strong>￥32.00</strong></div>
</li>
<li>
<div class="shop-img">
<a href="">
<img src="images/5.5.jpg"></a>
</div>
<div class="shop-name">
<a href="">无痕挂钩</a></div>
<div class="shop-price">市场价：
<strong>￥12.00</strong></div>
</li>
</ul>
</div>
</div>
</body>
</html>
JavaScript从入门到精通强化训练分册源码.7z
版权申诉
78 浏览量
2022-07-14
14:18:34
上传
评论
收藏 19.03MB 7Z 举报
JavaScript从入门到精通强化训练分册源码.7z （760个子文件） 
1.bmp 2.12MB
bootstrap.css 138KB share.css 4KB zhifu.css 4KB style.css 3KB index.css 3KB index.css 3KB index.css 3KB index.css 3KB index.css 3KB index.css 3KB index.css 3KB index.css 3KB index.css 3KB index.css 3KB style.css 3KB style.css 3KB style.css 2KB normalize.css 2KB densigner_contest.css 2KB style.css 2KB style.css 2KB style.css 2KB style.css 2KB style.css 1KB style.css 1KB style.css 1KB index.css 1KB style.css 1008B index.css 855B index.css 855B style.css 815B index.css 811B zzsc.css 804B index.css 796B style.css 793B default.css 785B index.css 766B index.css 766B index.css 766B index.css 766B index.css 752B index.css 689B index.css 604B index.css 393B css.css 391B style.css 341B index.css 183B Thumbs.db 24KB Thumbs.db 11KB Thumbs.db 11KB Thumbs.db 6KB glyphicons-halflings-regular.eot 20KB
main0.gif 100KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB bg.gif 43KB共 760 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
qq_38220914
- 粉丝: 603
- 资源: 4312
最新资源
- STC15单片机串口2使用程序例子
- 读取日志的excel生成周报 用python3开发weekplan-master.zip
- python 读取excel数据导入dbimport-data-master.zip
- K折交叉验证BP神经网络，多输入多输出BP神经网络（代码完整，数据齐全）
- B07训练原图.zip
- python-对Excel数据处理做可视化分析.zip
- 人工智能大作业-无人机图像目标检测的python源代码+文档说明.zip
- 基于GoogLeNet实现Cifar-10图像分类项目python源码（高分项目）.zip
- 数据库 sql 面试题目及答案解析.docx
- 汽车常见 10 种传感器故障后的表现与解决措施.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
