本文實例講述了jquery實現的仿天貓側導航tab切換效果。分享給大家供大家參考。具體如下：
這里演示jquery實現仿天貓側導航tab切換效果，引入外部JS,若初次運行有錯誤請刷新一頁面即可。本菜單是仿天貓商城的菜單，大塊的div菜單，支持超多的產品分類，大網站風格，大氣實用的多分類網頁菜單。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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 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><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 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></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 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></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><!--內容切換end--></div></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
