案例"/>
用jQuery制作一个小案例
希望继续学习并更新
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>taobaocase</title><script src="../jquery-3.6.3.js"></script><style>#rooy{width: 400px;height: 270px;background-color: pink;/* 设置页面居中显示 */margin: auto;position: relative;top: 200px;right: 120px;left: 80px;bottom: 200px;}#left{float: left;/* margin-top: 30px; *//* 这个也没用啊 */}#left li{width: 88px;height: 26px;line-height: 26px;/* background-color: red; *//* 不要点 */list-style: none;/* 当上面是绝对下面是相对好像不太行啊设计位置的方法不太行啊 */}#content{/* display: inline-block; 没有用*/float: right;/* width: 180px;height: 270px; *//* background-color: aqua; */}#content div img{width: 250px;height: 270px;}</style>
</head>
<body><div id="rooy"><ul id="left"><li><a href="#">JK服装</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="pic/jk.jpg" ></a></div><div><a href=""><img src="pic/babycloth.png" ></a></div><div><a href=""><img src="pic/dress.jpeg" ></a></div><div><a href=""><img src="pic/hanfu.jpg" ></a></div><div><a href=""><img src="pic/jacket.png" ></a></div><div><a href=""><img src="pic/lolita.jpg" ></a></div><div><a href=""><img src="pic/skirt.png" ></a></div><div><a href=""><img src="pic/suit.jpg" ></a></div><div><a href=""><img src="pic/weiyi.jpg" ></a></div></div></div>
</body>
<script>$(function(){$('#left li').mouseover(function(){var index1 = $(this).index();//鼠标滑过显示对应的图片//console.log(index1);//显示自己的图片将其他的图片隐藏$("#content div").eq(index1).show();$("#content div").eq(index1).siblings().hide();//其他隐藏})})// $(function(){})的写法注意// $("#content div").hide()
</script>
</html>成果
图片网上随便找的，视频看的是B站的
ps：学习jQuery请看其他大神的。
更多推荐
用jQuery制作一个小案例
发布评论