jquery实现淘宝精品案例

版权声明：转载本文，请附录原文地址，如果错误，请联系我。 https://blog.csdn.net/qq_19880197/article/details/86640385

HTML

<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>
    <ul id="center">
        <li><a href="#"><img src="images/book.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/book.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/book.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/book.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/kuzi.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/kuzi.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/kuzi.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/kuzi.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/book.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/book.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/book.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/book.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/yifu.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/yifu.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/yifu.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/yifu.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/yifu.jpg" alt="" width="200" height="200"></a></li>
        <li><a href="#"><img src="images/yifu.jpg" alt="" width="200" height="200"></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>

CSS

*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
.wrapper{
    width: 298px;
    height: 248px;
    border: 1px solid black;
    overflow: hidden;
    margin: 100px   auto;
}
#left,#center,#right{
    float: left;
}
#left li,#right li{
    background-color: pink;

}
#left li a,#right li a{
    width: 48px;
    height: 27px;
    border-bottom: 1px solid black;
    display: block;
    line-height: 27px;
    text-align: center;
    color: #000;
}
#left li a:hover,#right li a:hover{
    background-color: skyblue;
}
#center{
    border-left: 1px solid black;
    border-right: 1px solid black;
}

jquery

第一种方法：

 $(function () {
          $("#left>li").mouseenter(function () {
             var idx=$(this).index();
             $("#center>li:eq("+idx+")").show().siblings().hide();
          });
            $("#right>li").mouseenter(function () {
                var idx=$(this).index()+9;
                $("#center>li:eq("+idx+")").show().siblings().hide();
            });
 });

第二种方法：

$(function () {
          $("#left>li").mouseenter(function () {
             var idx=$(this).index();
             $("#center>li:eq("+idx+")").show().siblings().hide();
          });  
 $("#right>li").mouseenter(function () {
               var idx=$(this).index();
               $("#center>li").eq(idx).show().siblings().hide();
            });

        });