【jQuery学习】淘宝精品栏案例
生活随笔
收集整理的這篇文章主要介紹了
【jQuery学习】淘宝精品栏案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?利用jquery實現了tab欄切換
<style>*{margin: 0;padding: 0;}.wrapper{width: 250px;height: 248px;margin: 100px auto 0;overflow: hidden;border: 1px solid pink;border-right: 0;}.left,.content{float: left;}.left li{list-style: none;background: url('images/lili.jpg') repeat-x;}.left a{display: block;width: 48px;height: 27px;line-height: 27px;border-bottom: 1px solid pink;text-align: center;text-decoration: none;color: #000;}.left a:hover{background: url('images/abg\(1\).gif');}.content{border-left: 1px solid pink;border-right: 1px solid pink;}</style><script src="jquery.min.js"></script><script>$(function(){$(".left li").mouseover(function(){var index = $(this).index();$(".content div").eq(index).show();$(".content div").eq(index).siblings().hide();})})</script> </head> <body><div class="wrapper"><ul class="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><div class="content"><div><a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/女褲.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/羽絨服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/牛仔褲.jpg" width="200" height="250" /></a></div></div></div>總結
以上是生活随笔為你收集整理的【jQuery学习】淘宝精品栏案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android+7.0+nexus5x,
- 下一篇： 如何在约一分钟的时间内使照片看起来像铅笔