商品展示

最新推荐文章于 2022-05-06 14:54:06 发布

人道烘炉_L

最新推荐文章于 2022-05-06 14:54:06 发布

阅读量291

点赞数

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
       * {
            margin: 0;
            padding: 0;
            font-size: 36px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .bg {
            width: 902px;
            height: 750px;
            margin-left: 100px;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #center, #right {
            float: left;
        }

        #left li, #right li {
            background-color: darkgray;
        }

        #left li a, #right li a {
            display: block;
            width: 150px;
            height: 83px;
            border-bottom: 1px solid pink;

            text-align: center;
            color: black;
        }

        #left li a:hover {
            background-color: crimson;
        }
        #right li a:hover {
            background-color: crimson;
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="js/js/jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            //需求：鼠标放入两侧的li中，让中间的ul中对应索引值的li显示出来，其他的隐藏。（右侧的li要+9）
            //左侧先绑。获取绑mouseenter
            $("#left li").mouseenter(function () {
                //显示对应索引值的中间的li
                //alert($(this).index()); 获取索引值
                $("#center li").eq($(this).index()).show().siblings("li").hide();
            });

            //右侧
            $("#right li").mouseenter(function () {
                //显示对应索引值的中间的li
                //alert($(this).index()); 获取索引值
                $("#center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();
            });
        });
    </script>
   </head>
   <body>
       <div class="bg">
           <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>
           <ul id="center">
                <li><a href="#"><img src="img/女靴.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/雪地靴.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/冬裙.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/呢大衣.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/毛衣.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/棉服.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/女裤.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/羽绒服.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/牛仔裤.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/女包.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/男包.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/登山鞋.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/皮带.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/围巾.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/皮衣.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/男毛衣.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/男棉服.jpg" width="600" height="750"/></a></li>
                <li><a href="#"><img src="img/男靴.jpg" width="600" height="750"/></a></li>
                </ul>

               <ul id="right">
                <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>
   </body>
</html>