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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

仿天猫侧导航-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;}

/*重置标题为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;

}

$(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();

});

});

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