jquery练习5
效果:
代码:
<style> ul,li,div{padding:0px;margin:0px;list-style:none;} #mycont{width:323px;height:height:104px;} #mytabnav{width:59px;float:left;} #mytabnav li{width:59px;height:26px;line-height:26px;} #mytabcont{width:260px;float:left;} #mytabcont div{display:none;} #mytabnav li a{ display: block; text-decoration: none; width: 57px; height: 25px; line-height: 25px; text-align: center; color: #553F20; background-image: url(http://img.alimama.cn/cms/images/1328869531524.gif); border-right: 1px solid #C6D8E0; border-left: 1px solid #C6D8E0; border-top: 1px solid #C6D8E0; overflow: hidden; } #mytabnav li a:hover{ color: #fff; background-color: #FF6600; background-image: url(http://img.alimama.cn/cms/images/1324263019208.jpg); } .select_hover{ color: #fff; background-color: #FF6600; background-image: url(http://img.alimama.cn/cms/images/1324263019208.jpg); } </style> <div id="mycont"> <div id="mytabnav"> <li><a href="#">中年装</a></li> <li><a href="#">女装皮草</a></li> <li><a href="#">小西装</a></li> <li><a href="#">棉衣女</a></li> </div> <div id="mytabcont"> <div style="display:block;"><a href="#"><img src="images/znz.jpg" /></a></div> <div><a href="#"><img src="images/nzpc.jpg" /></a></div> <div><a href="#"><img src="images/xxz.gif" /></a></div> <div><a href="#"><img src="images/myn.jpg" /></a></div> </div> </div> <script src="jquery-1.7.2.min.js"></script> <script type="text/javascript" > //自动变化样式 $(document).ready(function(){ $("#mytabnav li").mouseover(function(){ $(this).addClass("select_hover").siblings().removeClass("select_hover"); var index=$(this).index(); $("#mytabcont div:eq("+index+")").show().siblings().hide(); }) }) </script>