jQuery 选择器：淘宝精品服饰

最新推荐文章于 2021-01-27 14:11:04 发布

没人回复我哼

最新推荐文章于 2021-01-27 14:11:04 发布

阅读量235

点赞数 1

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/105975632

版权

通过学习，了解到如何使用 jQuery 在鼠标经过左侧导航的 li 时，显示相应索引号的图片并隐藏其他图片。关键点包括获取元素索引号 $(this).index() 和使用 eq(index) 方法选择图片，结合 show() 和 hide() 方法实现显示与隐藏效果。

摘要由CSDN通过智能技术生成

学习来源：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

最低0.47元/天解锁文章

没人回复我哼

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery 选择器：淘宝精品服饰

要求鼠标经过左侧导航，右侧相应的图片显示，其余图片隐藏思路1.鼠标经过左侧盒子某个 li，就让内容区盒子相对应图片显示，其余的图片隐藏。2.需要得到当前 li 的索引号，就可以显示对应索引号的图片3.jQuery 得到当前元素索引号 $(this).index()4.中间对应的图片可以通过 eq(index) 方法去选择5.显示元素 show() 隐藏元素 hide()&l...
复制链接

扫一扫