多个tab菜单共存.doc

效果如下图：html页面文件如下!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN /TR/xhtml1/DTD/xhtml1-transitional.dtd .tab-containerbackground:#FFF; width:364px; clear:both; margin-top:1px; .sub-conheight:158; width:364px; display:none; padding-top:5px; .cur-sub-con display:block; .tab-nav width:364px; height:28px; .tab-nav ulwidth:360px; height:28px; padding:0px; .tab-nav ul li list-style:none; display:inline-block; width:90px; height:28px; line-height:28px; font-size:12px; font-weight:bold; text-align:center; margin-right:0px; float:left; .tab-nav ul li a background:#fff; text-decoration:none; color:#213b4a; height:28px; display:block; border-bottom:1px solid #DFDFE0; border-right:1px solid #DFDFE0; border-top:1px solid #DFDFE0; .tab-nav ul li a:hover background:#CCEDFB .tab-nav ul li a.cur z-index:9999;border-bottom:1px solid #fff; color:#F00; .tabItem border:1px solid #DFDFE0; width:364px; margin-bottom:10px; $(document).ready(function () $(.tab-nav ul li a).mouseover(function () tabChange($(this); ); function tabChange(obj) var curA = obj; var curLi = curA.parent(); var curTabNav = curA.parent().parent().parent(); var CurTabNavIndex = $(#tabparent div).children(.tab-nav).index(curTabNav) + 1; /如tabparent下有多层节点，则遍历下去，如下 /var CurTabNavIndex = $(#tabparent ul li table tr td).children(.tab-nav).index(curTabNav) + 1; $(#tc + CurTabNavIndex).children(.cur-sub-con).removeClass(cur-sub-con); $(#tc + CurTabNavIndex + div).eq($(#tn + CurTabNavIndex + ul li).index(curLi).addClass(cur-sub-con); $(#tn + CurTabNavIndex + ul li a).filter(.cur).removeClass(cur); curA.addClass(cur); /点击响应/ $(.tab-nav ul li a).click(function () / tabChange($(this);/ ); ); 动态添加多个tab，只需动态修改tab-nav的ID和tab-container的ID tab1 tab2 content1 content2 tab1_1 tab2_1 content1 content2 content1 tab1_2 tab2_2 content1content1 content2content1 tab4_1 tab4_2 tab4_3 tab4_4 content1content1 content1 content1 content1 content1 content1 content2content1 content1 content1 content1 co