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();});});

?

總結(jié)

以上是生活随笔為你收集整理的jquery实现淘宝精品案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。