<!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>