jquery實現(xiàn)的仿天貓側(cè)導(dǎo)航tab切換效果

更新時間：2015年08月24日 10:56:44 作者：企鵝

這篇文章主要介紹了jquery實現(xiàn)的仿天貓側(cè)導(dǎo)航tab切換效果,涉及jquery鼠標(biāo)事件及鏈式操作實現(xiàn)頁面元素樣式遍歷切換效果的技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)的仿天貓側(cè)導(dǎo)航tab切換效果。分享給大家供大家參考。具體如下：

這里演示jquery實現(xiàn)仿天貓側(cè)導(dǎo)航tab切換效果，引入外部JS,若初次運行有錯誤請刷新一頁面即可。本菜單是仿天貓商城的菜單，大塊的div菜單，支持超多的產(chǎn)品分類，大網(wǎng)站風(fēng)格，大氣實用的多分類網(wǎng)頁菜單。

運行效果截圖如下：

在線演示地址如下：

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>仿天貓側(cè)導(dǎo)航-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;}
/*重置標(biāo)題為body正常字體大小，需要時可另行設(shè)置*/
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
abbr, acronym {border: 0;font-variant: normal;}
/*表單元素樣式不會自動繼承body樣式，所以要設(shè)置其繼承body的樣式，或者像最后一行設(shè)置也可以*/
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設(shè)置為100%就可以使得頁面和窗口一樣高；
處于標(biāo)準模式時，body以html標(biāo)簽為高度參照，html以窗口為高度參照，所以html要設(shè)置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;
}
/* 切換導(dǎo)航樣式 */
.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;}
/* 主要內(nèi)容區(qū)樣式 */
.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() {
 /*切換導(dǎo)航，添加當(dāng)前效果*/
 $(".sidebar_tab li a").mouseover(function() {
  $(this).parent("li").addClass("sidebar_tab_cur");
  $(this).parent("li").siblings().removeClass("sidebar_tab_cur");
 });
 /*鼠標(biāo)移入導(dǎo)航，切換對應(yīng)內(nèi)容*/
 $(".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">
 <!--導(dǎo)航切換-->
 <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>
 <!--內(nèi)容切換-->
 <div class="sidebar_main">
 <!--所有商品分類-->
 <div class="sidebar_main_all">
   <h2>所有商品分類</h2>
   <ul>
    <li>
    <h3><a href="#">女裝</a><a href="#">男裝</a><a href="#">內(nèi)衣</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="#">內(nèi)衣</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="#">內(nèi)衣</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="#">空調(diào)</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="#">空調(diào)</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="#">空調(diào)</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="#">空調(diào)</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="#">空調(diào)</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><!--內(nèi)容切換end-->
</div>
</body>
</html>

希望本文所述對大家的jquery程序設(shè)計有所幫助。

您可能感興趣的文章: