<!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 （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
资源评论
