本文实例讲述了jquery实现的仿天猫侧导航tab切换效果。分享给大家供大家参考。具体如下：
这里演示jquery实现仿天猫侧导航tab切换效果，引入外部JS,若初次运行有错误请刷新一页面即可。本菜单是仿天猫商城的菜单，大块的div菜单，支持超多的产品分类，大网站风格，大气实用的多分类网页菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/
具体代码如下：
<!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> <style> body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td,select {margin: 0;padding: 0;} fieldset, img {border: 0 none;} img {vertical-align: top;} :focus {outline: 0;} address, caption, cite, code, dfn, em, strong, th, var, optgroup {font-style: normal; font-weight: normal;} /*重置标题为body正常字体大小，需要时可另行设置*/ h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;} abbr, acronym {border: 0;font-variant: normal;} /*表单元素样式不会自动继承body样式，所以要设置其继承body的样式，或者像最后一行设置也可以*/ input, button, textarea,select, optgroup, option {font-family: arial;font-size: inherit;font-style: inherit; font-weight: inherit;} code, kbd, samp, tt {font-size: 100%;} input, button, textarea, select {*font-size: 100%; font-style: normal; font-variant: normal;} ol, ul {list-style: none;} input,select,label{vertical-align:middle} table {border-collapse: collapse; border-spacing: 0;} caption, th {text-align: left;} sup {vertical-align: text-top;} sub {vertical-align: text-bottom;} body{font:12px/1.5 Arial,Helvetica,sans-serif; _font-family:"SimSun";} /*IE处于混杂模式时，body以窗口为高度参照，body设置为100%就可以使得页面和窗口一样高； 处于标准模式时，body以html标签为高度参照，html以窗口为高度参照，所以html要设置100%，body高度才会100%占满整个浏览器窗口*/ html, body { height: 100%; background: #FFF; } body {font: 12px/1.5 tahoma,arial,"宋体";} h2 {font-size: 14px;} h3 {font-size: 12px;} a { color: #fff; text-decoration: none; } .sidebar { margin: 40px auto 0; width: 400px; } /* 切换导航样式 */ .sidebar_tab { float: left; width: 30px; } .sidebar_tab li { padding: 5px; border: 1px solid #ccc; background: #fff; } .sidebar_tab a { font-size: 14px; font-weight: bold; color: #ddd; } .sidebar_tab li:hover a { color: #fff; } .sidebar_tab_all a { color: #5a4e4d; } li.sidebar_tab_cur { margin-left: -7px; padding-left: 12px; -moz-border-radius: 8px 0 0 8px;/* FF浏览器低版本 圆角 */ -webkit-border-radius: 8px 0 0 8px;/* Chrome和Safari浏览器 圆角 */ border-radius: 8px 0 0 8px; behavior: url(../js/tool_iecss3.htc);/* IE浏览器 圆角 */ } li.sidebar_tab_cur a {color:#fff;} .sidebar_tab_all:hover,.sidebar_tab_all.sidebar_tab_cur {background:#5a4e4d;} .sidebar_tab_appliance a {color:#3a4e8a;} .sidebar_tab_appliance:hover,.sidebar_tab_appliance.sidebar_tab_cur {background:#3a4e8a;} .sidebar_tab_shop a {color:#c17987;} .sidebar_tab_shop:hover,.sidebar_tab_shop.sidebar_tab_cur {background:#c17987;} /* 主要内容区样式 */ .sidebar_main { float: left; margin-top: -30px; width: 300px; } .sidebar_main h2 { padding-left: 10px; line-height: 30px; color: #ccc; } .sidebar_main ul li { position: relative; padding: 5px 0 5px 10px; border-bottom: 1px solid #666; } .sidebar_main_all li {background:#877e7d;} .sidebar_main_all h2,.sidebar_main_all li:hover {background:#736867;} .sidebar_main_appliance li {background:#688ac8;} .sidebar_main_appliance h2,.sidebar_main_appliance li:hover {background:#5568a3;} .sidebar_main_shop li{background:#e68786;} .sidebar_main_shop h2,.sidebar_main_shop li:hover {background:#bd7382;} .sidebar_main li:hover em {display:none;} .sidebar_main ul li a {padding-right:10px;} .sidebar_main a {font-size:12px;} .sidebar_main a:hover {text-decoration:underline;} .sidebar_main h3 em { float:right; margin-right:20px; font-style:normal; color:#666; } </style> <script type="text/javascript" src="jquery-1.6.2.min.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> <> <ul> <li><a href="#">所有商品</a></li> <li><a href="#">电器城</a></li> <li><a href="#">美容院</a></li> </ul> <> <div> <> <div> <h2>所有商品分类</h2> <ul> <li> <h3><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></p> </li> <li> <h3><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><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></p> </li> <li> <h3><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></p> </li> <li> <h3><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> <h2>电器城商品分类</h2> <ul> <li> <h3><a href="#">大家电</a><em>></em></h3> <p><a href="#">洗衣机</a><a href="#">冰箱</a><a href="#">空调</a></p> <p><a href="#">LED</a><a href="#">燃气灶</a></p> </li> <li> <h3><a href="#">生活电器</a><em>></em></h3> <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">空调</a></p> <p><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></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></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></p> <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p> </li> </ul> </div> <> <div> <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></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></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></p> </li> <li> <h3><a href="#">家饰鲜花</a><em>></em></h3> <p><a href="#">装饰画</a><a href="#">花瓶</a></p> <p><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></p> <p><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></p> <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a></p> </li> </ul> </div> </div><> </div> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。
【jquery实现的仿天猫侧导航tab切换效果】相关文章：
★ jquery插件splitScren实现页面分屏切换模板特效
★ 解密效果