jquery实现的仿天猫侧导航tab切换效果

本文实例讲述了jquery实现的仿天猫侧导航tab切换效果。分享给大家供大家参考。具体如下：

这里演示jquery实现仿天猫侧导航tab切换效果，引入外部JS,若初次运行有错误请刷新一页面即可。本菜单是仿天猫商城的菜单，大块的div菜单，支持超多的产品分类，大网站风格，大气实用的多分类网页菜单。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/

具体代码如下：





仿天猫侧导航-tab切换

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;}

h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
abbr, acronym {border: 0;font-variant: normal;}

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";}

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;
 -webkit-border-radius: 8px 0 0 8px;
 border-radius: 8px 0 0 8px;
 behavior: url(../js/tool_iecss3.htc);
 }
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;
}


 



 
 
  所有商品
 电器城
 美容院
 
 
 
 
 
   所有商品分类
   
    
    女装男装内衣>
    连衣裙女T恤女裤男T恤
    短裤衬衫家居服
    
  
   女装内衣配件>
    连衣裙女T恤女裤男T恤
    短裤衬衫文胸家居服
   
  女装男装配件>
    连衣裙女T恤女裤男T恤
    衬衫文胸家居服
   
  
   女装内衣配件>
    连衣裙女T恤女裤男T恤
    短裤文胸家居服
    
  
   女装男装配件>
    连衣裙女T恤女裤男T恤
    短裤衬衫文胸家居服
   
   
 
 
  
   电器城商品分类
   
   
    大家电>
  洗衣机冰箱空调
   LED燃气灶
  
  
    生活电器>
  洗衣机油烟机空调
   液晶电视电视燃气灶
  
  
    厨房电器>
  洗衣机冰箱空调
   液晶电视LED电视燃气灶
  
  
    大家电>
  洗衣机油烟机空调
   液晶电视LED电视燃气灶
  
  
    大家电>
  油烟机冰箱空调
   液晶电视LED电视燃气灶
  
  
 
 
 
   美容院商品分类
   
   
    家饰鲜花>
   摆件照片墙装饰画花瓶
  油画雕艺鲜花
  
  
    家饰鲜花>
   摆件照片墙装饰画花瓶
  油画装饰器皿鲜花
  
  
    家饰鲜花>
   摆件照片墙装饰画花瓶
  装饰器皿鲜花
  
  
    家饰鲜花>
   装饰画花瓶
  油画雕艺鲜花
  
  
    家饰鲜花>
   装饰画花瓶
  油画装饰器皿鲜花
  
  
    家饰鲜花>
   摆件照片墙装饰画
  油画雕艺装饰器皿

希望本文所述对大家的jquery程序设计有所帮助。

jquery实现的仿天猫侧导航tab切换效果

JavaScript相关栏目本月热门文章