用jQuery制作一个小案例

zlldropl

于 2023-02-28 16:04:00 发布

阅读量52

点赞数

文章标签： jquery Powered by 金山文档

本文链接：https://blog.csdn.net/qq_43679306/article/details/129263626

版权

该代码示例展示了一个HTML页面，利用jQuery实现当鼠标悬停在左侧导航列表项上时，右侧显示相应的图片。页面结构包括一个左侧的导航栏和一个右侧的内容区域，通过CSS控制布局和样式，jQuery处理交互逻辑。

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

希望继续学习并更新

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>taobaocase
    </title>
    <script src="../jquery-3.6.3.js"></script>
    <style>
        #rooy{
            width: 400px;
            height: 270px;
            background-color: pink;
            /* 设置页面居中显示 */
           margin: auto;
           position: relative;
           top: 200px;
           right: 120px;
           left: 80px;
           bottom: 200px;
        }
        #left{
            float: left;
            /* margin-top: 30px; */
            /* 这个也没用啊 */
        }
        #left li{
            
            width: 88px;
            height: 26px;
            line-height: 26px;
            /* background-color: red; */
            /* 不要点 */
            list-style: none;
            /* 当上面是绝对下面是相对好像不太行啊设计位置的方法不太行啊 */


        }
        #content{
            /* display: inline-block; 没有用*/
            float: right;
            /* width: 180px;
            height: 270px; */
            /* background-color: aqua; */
        }
        #content div img{
            width: 250px;
            height: 270px;
        }
    </style>
</head>
<body>
    <div id="rooy">
        <ul id="left">
            <li><a href="#">JK服装</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="pic/jk.jpg" ></a>
            </div>
            <div>
                <a href=""><img src="pic/babycloth.png" ></a>
            </div>
            <div><a href=""><img src="pic/dress.jpeg" ></a></div>
            <div><a href=""><img src="pic/hanfu.jpg" ></a></div>
            <div><a href=""><img src="pic/jacket.png" ></a></div>
            <div><a href=""><img src="pic/lolita.jpg" ></a></div>
            <div><a href=""><img src="pic/skirt.png" ></a></div>
            <div><a href=""><img src="pic/suit.jpg" ></a></div>
            <div><a href=""><img src="pic/weiyi.jpg" ></a></div>
        </div>
    </div>
</body>
<script>
    $(function(){
      
        $('#left li').mouseover(function(){
            var index1 = $(this).index();//鼠标滑过显示对应的图片
            //console.log(index1);
            //显示自己的图片将其他的图片隐藏
            $("#content div").eq(index1).show();
            $("#content div").eq(index1).siblings().hide();//其他隐藏
        })
    })
    //    $(function(){})的写法注意
    // $("#content div").hide()
</script>
</html>