6.淘宝服饰精品案例

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

肝JOJO

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

阅读量957

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_34620296/article/details/103606800

版权

jQuery 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

效果如下
鼠标经过某个li会显示对应的图片,而隐藏其他图片
在这里插入图片描述
代码

    <script src="jQuery.js"></script>
    <script>
    /*
    核心原理:
        1.鼠标经过左侧盒子某个小li,就让内容区盒子显示,其余图片隐藏
        2.需要得到当前li的索引号,就可以显示对应索引号的图片
        3.jQuery得到当前元素索引号 $(this).index()
        4.对应的图片,可以通过eq(index)方法选择
    */
        $(function(){
            //1.鼠标经过li
            $("#left li").mouseover(function(){
                //2.得到当前li的索引号
                var index = $(this).index();
                //3.让右侧盒子相应索引号的图片显示
                $("#content div").eq(index).show();
                //4.隐藏其他图片(兄弟)
                $("#content div").eq(index).siblings().hide();
                
            })
        })
    </script>

<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>