jquery案例：淘宝精品服饰案例（简写，重点是jquery的代码）

最新推荐文章于 2022-10-30 15:30:19 发布

Eli-sun

最新推荐文章于 2022-10-30 15:30:19 发布

阅读量1k

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/vfjcgg/article/details/105620085

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

案例：淘宝精品服饰案例
1.核心原理：鼠标经过某个盒子鼠标小li，就让内容区盒子相对应图片显示，其余的图片隐藏，
2.需要得到当前小li的索引号，
3.jQuery得到当前元素的索引号$(this).index()
4.中间对印的图片，可以通过eq(index)方法去选择
5.显示元素show(),隐藏元素hide()

栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery-mini.js"></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>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <div id="content">
        <div>
            <a href="#"><img src="#" width="200px" height="200px" alt=""></a>
        </div>
    </div>
    <script>
        $(function() {
            //1.鼠标经过左侧的小li
            $('#left').mouseover(function() {
                //2.得到当前小li的索引号
                var index = $(this).index();

                //3.让我们右侧的盒子相应的索引号的图片显示出来就好了
                $('#content div').eq(index).show();

                //4.让其余的图片(就是其他的兄弟)隐藏起来
                $('#content div').eq(index).siblings().hide();
            })
        })
    </script>
</body>

</html>

Eli-sun

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery案例：淘宝精品服饰案例（简写，重点是jquery的代码）

案例：淘宝精品服饰案例1.核心原理：鼠标经过某个盒子鼠标小li，就让内容区盒子相对应图片显示，其余的图片隐藏，2.需要得到当前小li的索引号，3.jQuery得到当前元素的索引号$(this).index()4.中间对印的图片，可以通过eq(index)方法去选择5.显示元素show(),隐藏元素hide()栗子：<!DOCTYPE html><html lang...
复制链接

扫一扫