jQuery 选择器：淘宝精品服饰
学习来源：https://www.bilibili.com/video/BV1HJ41147DG
要求
鼠标经过左侧导航，右侧相应的图片显示，其余图片隐藏
思路
1.鼠标经过左侧盒子某个 li，就让内容区盒子相对应图片显示，其余的图片隐藏。
2.需要得到当前 li 的索引号，就可以显示对应索引号的图片
3.jQuery 得到当前元素索引号 $(this).index()
4.中间对应的图片可以通过 eq(index) 方法去选择
5.显示元素 show() 隐藏元素 hide()
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝精品服饰</title><script src="jquery.min.js"></script><style>* {margin: 0;padding: 0;font-size: 12px;}li {list-style: none;}a {color: #000;text-decoration: none;}.wrapper {width: 250px;height: 248px;margin: 100px auto;border: 1px solid pink;border-right: 0;overflow: hidden;}.left,.content {float: left;}.left li {background: url(images/lili.jpg) repeat-x;}.left li a {display: block;width: 48px;height: 27px;border-bottom: 1px solid pink;line-height: 27px;text-align: center;color: black;}.left li a:hover {background-image: url(images/abg.gif);}.content {border-left: 1px solid pink;border-right: 1px solid pink;}.conten img {width: 200px;height: 250px;}</style><script>$(function () {// 鼠标经过左侧的 li $('.left li').mouseover(function () {// 得到当前 li 的索引号var index = $(this).index();// 让右侧盒子对应索引号的图片显示出来// 方法一：// $('.content li').eq(index).show();// $('.content li').eq(index).siblings().hide();// 方法二：链式编程$(".content li").eq(index).show().siblings().hide();})})</script>
</head><body><div class="wrapper"><ul class="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 class="content"><ul><li><a href="#"><img src="images/女靴.jpg" /></a></li><li><a href="#"><img src="images/雪地靴.jpg" /></a></li><li><a href="#"><img src="images/冬裙.jpg" /></a></li><li><a href="#"><img src="images/呢大衣.jpg" /></a></li><li><a href="#"><img src="images/毛衣.jpg" /></a></li><li><a href="#"><img src="images/棉服.jpg" /></a></li><li><a href="#"><img src="images/女裤.jpg" /></a></li><li><a href="#"><img src="images/羽绒服.jpg" /></a></li><li><a href="#"><img src="images/牛仔裤.jpg" /></a></li></ul></div></div>
</body></html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！