jQuery应用-淘宝服饰精品选项卡功能设计_左侧选项卡实例jquery-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44038540/article/details/113185053

jQuery应用-淘宝服饰精品案例设计

1.案例功能描述

本案例旨在通过jQuery实现淘宝页面的选项卡功能，即当鼠标滑动到左侧某个列表项时，右侧内容区显示与描述有关的图片。

2.页面设计效果预览

在这里插入图片描述

3.设计核心

①鼠标经过左侧盒子某个列表项时，就让内容区盒子（即右侧盒子）相对应的图片显示。其余的图片隐藏。
②需要得到当前列表项的索引号，就可以显示对应索引号的图片。
③用jQuery得到当前元素索引号:$(this).index()
④中间对应的图片，可以通过eq(index)方法去选择
⑤显示元素show(),隐藏元素hide()

4.HTML页面框架设计

<body>
<div class="wrapper">
        <div class="left">
            <ul>
                <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 class="right">
            <div class="current">
                <a href="#"><img src="pactiure/1.1.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.2.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.3.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.4.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.5.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.6.jpg"/></a>
            </div>
        </div>
    </div>

</body>

5.CSS样式设计

这里的设计重点在于对右侧内容区图片设计。这里用绝对布局使右侧6张图片都定义在同一个位置，将每张图片的大小一样时，就可以实现覆盖效果。至于在刚打开界面时，右侧显示的应该是列表项第一个的图片，这个可以通过jQuery实现。

<style>
        .wrapper{
            position: absolute;
            left: 400px;
            top: 100px;
            width: 600px;
            height: 400px;
            /*padding: 10px;*/
            border: solid black 2px;
        }
        .left{
            width:100px;
            height: 400px;
            float: left;
            padding-right: 10px;
            border: solid black 2px;
        }
        .left ul{
            list-style: none;
            margin-left: -30px;

        }
        .left ul li{
            color:black;
            font-size: 17px;
            padding: 15px 10px 15px 10px;
        }
        .left ul li:hover{
            background-color: gray;
        }
        .left ul li a{
            color:black;
        }
        .right{
            float: left;
            width:480px;
            height: 400px;
            border: solid black 2px;
        }
        .right img{
            width:490px;
            height: 400px;
            position: absolute;
            left: 110px;
            right: 0;
        }

    </style>

6.jQuery设计

①在刚打开界面时，右侧显示的应该是列表项第一个的图片，这里可以通过jQuery获取第一个图片所在的div，生成jquery对象，让其显示；让其兄弟div隐藏即可

$(function (){
            $(".current").show();
            $(".current").siblings("div").hide();

        })

②实现当鼠标经过左侧的列表项时，右侧内容区显示相应的图片信息。

 $(function (){
           
           $(".left ul li").mouseover(function (){
               var index = $(this).index();
               $(".right div").eq(index).show();
               $(".right div").eq(index).siblings("div").hide();
           })

        })

7.项目源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝服饰精品</title>
    <script typeof="text/javascript" src="jQuery/jquery-3.5.1.js"></script>
    <style>
        .wrapper{
            position: absolute;
            left: 400px;
            top: 100px;
            width: 600px;
            height: 400px;
            /*padding: 10px;*/
            border: solid black 2px;
        }
        .left{
            width:100px;
            height: 400px;
            float: left;
            padding-right: 10px;
            border: solid black 2px;
        }
        .left ul{
            list-style: none;
            margin-left: -30px;

        }
        .left ul li{
            color:black;
            font-size: 17px;
            padding: 15px 10px 15px 10px;
        }
        .left ul li:hover{
            background-color: gray;
        }
        .left ul li a{
            color:black;
        }
        .right{
            float: left;
            width:480px;
            height: 400px;
            border: solid black 2px;
        }
        .right img{
            width:490px;
            height: 400px;
            position: absolute;
            left: 110px;
            right: 0;
        }

    </style>
</head>
<body>
    <script>
        $(function (){
            $(".current").show();
            $(".current").siblings("div").hide();

           $(".left ul li").mouseover(function (){
               var index = $(this).index();
               $(".right div").eq(index).show();
               $(".right div").eq(index).siblings("div").hide();
           })

        })
    </script>
    <div class="wrapper">
        <div class="left">
            <ul>
                <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 class="right">
            <div class="current">
                <a href="#"><img src="pactiure/1.1.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.2.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.3.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.4.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.5.jpg"/></a>
            </div>
            <div>
                <a href="#"><img src="pactiure/1.6.jpg"/></a>
            </div>
        </div>
    </div>

</body>
</html>

最后，如果大家感兴趣，在代码下载后，需要更改一下项目中图片的地址哦。