下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿天猫侧导航-tab切换</title> <link rel="stylesheet" type="text/css" href="../css/reset.css" /> <link rel="stylesheet" type="text/css" href="../css/main.css" /> <script type="text/javascript" src="../js/jquery-1-7-2.js"></script> <script type="text/javascript"> $(function() { /*切换导航，添加当前效果*/ $(".sidebar_tab li a").mouSEOver(function() { $(this).parent("li").addClass("sidebar_tab_cur"); $(this).parent("li").siblings().removeClass("sidebar_tab_cur"); }); /*鼠标移入导航，切换对应内容*/ $(".sidebar_tab_all").mouSEOver(function() { $(".sidebar_main_all").show().siblings().hide(); }); $(".sidebar_tab_appliance").mouSEOver(function() { $(".sidebar_main_appliance").show().siblings().hide(); }); $(".sidebar_tab_shop").mouSEOver(function() { $(".sidebar_main_shop").show().siblings().hide(); }); }); </script> </head> <body> <div class="sidebar"> <!--导航切换--> <ul class="sidebar_tab"> <li class="sidebar_tab_all sidebar_tab_cur"><a href="#">所有商品</a></li> <li class="sidebar_tab_appliance"><a href="#">电器城</a></li> <li class="sidebar_tab_shop"><a href="#">美容院</a></li> </ul> <!--内容切换--> <div class="sidebar_main"> <!--所有商品分类--> <div class="sidebar_main_all"> <h2>所有商品分类</h2> <ul> <li> <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3> <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p> <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p> </li> <li> <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3> <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p> <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p> </li> <li> <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3> <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p> <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p> </li> <li> <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3> <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p> <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p> </li> <li> <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3> <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p> <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p> </li> <li> <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3> <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p> <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p> </li> <li> <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3> <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p> <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p> </li> </ul> </div> <!--电器城商品分类--> <div class="sidebar_main_appliance" style="display:none;"> <h2>电器城商品分类</h2> <ul> <li> <h3><a href="#">大家电</a><em>></em></h3> <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p> <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p> </li> <li> <h3><a href="#">生活电器</a><em>></em></h3> <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p> <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p> </li> <li> <h3><a href="#">厨房电器</a><em>></em></h3> <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p> <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p> </li> <li> <h3><a href="#">大家电</a><em>></em></h3> <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p> <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p> </li> <li> <h3><a href="#">大家电</a><em>></em></h3> <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p> <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p> </li> </ul> </div> <!--美容院商品分类--> <div class="sidebar_main_shop" style="display:none;"> <h2>美容院商品分类</h2> <ul> <li> <h3><a href="#">家饰鲜花</a><em>></em></h3> <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p> <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p> </li> <li> <h3><a href="#">家饰鲜花</a><em>></em></h3> <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p> <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p> </li> <li> <h3><a href="#">家饰鲜花</a><em>></em></h3> <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p> <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p> </li> <li> <h3><a href="#">家饰鲜花</a><em>></em></h3> <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p> <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p> </li> <li> <h3><a href="#">家饰鲜花</a><em>></em></h3> <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p> <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p> </li> <li> <h3><a href="#">家饰鲜花</a><em>></em></h3> <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p> <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p> </li> </ul> </div> </div><!--内容切换end--> </div><!--end .sidebar--> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
