用JQuery实现淘宝精品服饰案例

最新推荐文章于 2022-11-19 23:50:29 发布

winneryy

最新推荐文章于 2022-11-19 23:50:29 发布

阅读量689

点赞数

分类专栏： web前端文章标签： jquery

本文链接：https://blog.csdn.net/winneryy/article/details/113247444

版权

web前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		#content{
			border-left:1px  solid  pink;
			border-right:1px  solid   pink;
		}
	
	
	
	</style>
	<script    src="jquery-1.12.4.js"></script>
	<script>
	     $(function(){
			 $("#left  li").mouseover(function(){
				 var  index=$(this).index();
				 $("#content  div").eq(index).show();
				  $("#content  div").eq(index).siblings().hide();
			 })
		 })
	
	
	
	</script>
</head>

<body>
	<div  class="wrapper">
	<ul  id="left">
		<li><a  href="#">女靴</a></li>
		<li><a  href="#">雪地靴</a></li>
		<li><a  href="#">冬裙</a></li>
		<li><a  href="#">呢大衣</a></li>
		<li><a  href="#">毛衣</a></li>
		<li><a  href="#">棉服</a></li>
		<li><a  href="#">女裤</a></li>
		<li><a  href="#">羽绒服</a></li>
		<li><a  href="#">牛仔裤</a></li>
		
		</ul>
		<div  id="content">
		<div>
			<a  href="#"><img   src="images/女靴.jpg"  width="200"  height="250" /></a>
			</div>
		<div>
			<a  href="#"><img   src="images/雪地靴.jpg"  width="200"  height="250" /></a>
			</div>
		<div>
			<a  href="#"><img   src="images/冬裙.jpg"  width="200"  height="250" /></a>
			</div>
		<div>
			<a  href="#"><img   src="images/呢大衣.jpg"  width="200" height="250" /></a>
			</div>
	    <div>
			<a  href="#"><img   src="images/毛衣.jpg"  width="200"  height="250" /></a>
			</div>
		<div>
			<a  href="#"><img   src="images/棉服.jpg"  width="200"  height="250" /></a>
			</div>
		<div>
			<a  href="#"><img   src="images/女裤.jpg"  width="200"  height="250" /></a>
			</div>
		<div>
			<a  href="#"><img   src="images/羽绒服.jpg"  width="200"  height="250" /></a>
			</div>
		<div>
			<a  href="#"><img   src="images/牛仔裤.jpg"  width="200"  height="250" /></a>
			</div>
		</div>
	   </div>
</body>
</html>

步骤：