效果：代码：<style> ul,li,div{padding:0px;mar...
效果：
代码：
<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>
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：51. N-Queens 下一篇：APK安装时的过滤方式：包名白名单、证书认证
