JS控制下的双层Tab切换

　　如题，JS控制下的双层Tab切换，其实只要想通了原理，实现起来很简单！

　　首先，附上CSS

<style type="text/css">
img{border:none;padding:0px; margin:0 auto;}
ul,li{list-style-type:none; margin:0px; padding:0px;}
body {font-family:ì,Dì,oúì,Arial,Helvetica,sans-serif;font-size:12px;color:#5b5b5b; background:#fff;}
a:link{color: #5b5b5b;text-decoration:none}
a:visited{color:#5b5b5b;text-decoration:none}
a:hover {color:#5b5b5b;text-decoration:underline;}
a:active {color:#5b5b5b;}
area{text-decoration:none;}
font{font-size:12px;}

/* 特聘专家-权威专家 */
.zj-zt{width:1000px;height:auto;margin:0 auto;overflow:hidden;}
.nzzj{width:708px;float:left;display:inline;overflow:hidden;}
.nzzj-ti{width:708px;height:27px;overflow:hidden;border-bottom:1px solid #d7d7d7;}
.nzzj-ti ul li{width:92px;height:27px;float:left;display:inline;font-size:14px;font-weight:600;cursor:pointer;}
.nzzj-ti ul li.hover{background:url(http://fk.dayoo.com/images/ti-xb.jpg) no-repeat left bottom;color:#56019e;}
.nzzj-con{width:708px;height:315px;margin-top:10px;overflow:hidden;}
.tpzj{width:708px;height:278px;overflow:hidden;background:#f2f2f2;}
.tpzj dl dt{width:197px;float:left;margin-left:20px;display:inline;}
.tpzj dl dd{width:455px;float:left;margin-left:20px;display:inline;margin-top:25px;}
.zjtro{height:24px;line-height:24px;border-bottom:1px solid #fff;width:455px;color:#56019e;font-size:12px;}
.zjcz{font-size:12px;font-weight:normal;color:#0092e5;line-height:24px;}
.tpzj dl dd p strong{font-size:14px;font-style:normal;font-weight:600px;}
.tpzj dl dd p{line-height:22px;margin:12px 0px;}
.tpzj dl dd p b{color:#0092e5;}
.tpzj dl dd p a{color:#0092e5;}
.tpzj-lb{width:708px;height:32px;overflow:hidden;margin-top:5px;}
.tpzj-lb ul li{width:117px;height:32px;line-height:38px;float:left;display:inline;margin-left:1px;text-align:center;background:url(http://fk.dayoo.com/images/zjmz-bg.jpg) no-repeat;cursor:pointer;color:#5b5b5b;}
.tpzj-lb ul li.hover{background:url(http://fk.dayoo.com/images/zjmz-abg.jpg) no-repeat; color:#fff;}
</style>

　　其次，附上JS：

<script type="text/javascript">
function set2(name,cursel,n){
	  for(i=1;i<=n;i++){
	  var menu=document.getElementById(name+i);
	  var con=document.getElementById("con"+name+i);
	  menu.className=i==cursel?"hover":"";
	  con.style.display=i==cursel?"block":"none";
	} 
  }
</script>

　　最后，附上html代码：

<div class="nzzj">
<div class="nzzj-ti"><ul>
<li id="tpqw1" onMouseOver="set2(‘tpqw‘,1,2)" class="hover">特聘专家</li>
<li id="tpqw2" onMouseOver="set2(‘tpqw‘,2,2)" >权威专家</li></ul></div>
<div class="nzzj-con" id="contpqw1" style="display:block;">
<div class="tpzj" id="contpzjlb1" style="display:block;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-zyw.jpg" alt="卓乐雯" /></dt>
<dd><p class="zjtro"><strong>卓乐雯</strong>　主任医师　名誉院长</p>
<p class="zjcz">接诊时间：每周二、周三、周五、周六（上午）</p>
<p><b>她说：</b>健康是女人最宝贵的财富，看到她们治愈后如花的笑容，我同样心生喜悦。</p>
<p><b>专家简介：</b>毕业于中山医科大学，从事妇产科临床工作四十余年，先后担任湖南省衡阳市妇幼保健院、广州市妇婴医院院长，广州市妇科学会副主任委员。对妇科炎症、妇科内分泌......<a href="/fukezhuanjia/gzfukezhuanjia/2543.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="contpzjlb2" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-hw.jpg" alt="黄婉" /></dt>
<dd><p class="zjtro"><strong>黄婉</strong>　主任医师　教授　硕士生导师</p>
<p class="zjcz">接诊时间：每周一、周四（上午）</p>
<p><b>她说：</b>只要生命还是珍贵的，医生这个职业就永远倍受崇拜！</p>
<p><b>专家简介：</b>广州医学院硕士生导师、广州市干部保健专家。擅长妇科肿瘤、月经不调、不孕不育症等疾病诊治以及高危妊娠、孕前保健工作。在1998年曾获市科技进步三等奖......<a href="/fukezhuanjia/gzfukezhuanjia/5720.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="contpzjlb3" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-zht.jpg" alt="郑惠童" /></dt>
<dd><p class="zjtro"><strong>郑惠童</strong>　主任医师　教授</p>
<p class="zjcz">接诊时间：周一、周四（上午）</p>
<p><b>她说：</b>作为儿科医生，最好的答卷就是帮助家长给予宝宝最好的健康照顾。</p>
<p><b>专家简介：</b>广州市妇女儿童医疗中心、广州市儿童医院、广州妇幼保健院内儿科主任医师，从事儿科工作四十余年。广东省第二、三届围产医学会委员，广州市第一届妇幼保......<a href="/fukezhuanjia/gzfukezhuanjia/5688.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="contpzjlb4" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-lhl.jpg" alt="卢慧玲" /></dt>
<dd><p class="zjtro"><strong>卢慧玲</strong>　主任医师</p>
<p class="zjcz">接诊时间：每周三、四、六（上午）</p>
<p><b>她说：</b>认真、耐心、负责是每一个医生最基本的原则。</p>
<p><b>专家简介：</b>毕业于广西中医学院，从事临床医学工作三十五年。是经国家人事部、卫生部、中医药管理局批准，首批确定为国家名老中医专家的学术经验继承人，师承中医......<a href="/fukezhuanjia/gzfukezhuanjia/5735.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="contpzjlb5" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-shf.jpg" alt="舒慧芳" /></dt>
<dd><p class="zjtro"><strong>舒慧芳</strong>　主任医师</p>
<p class="zjcz">接诊时间：出诊时间：每周二、五（上午）</p>
<p><b>她说：</b>以最大的爱心对待患者，用最小的代价治愈疾病，还患者以健康、自信、美丽的人生，是我最大的心愿。</p>
<p><b>专家简介：</b>广州红十字会医院主任医师，曾担任科主任导师，中山医学院、暨南大学医学院、广东省药学院兼职教授，广东省优生优育学会专家委员、广东省妇幼保......<a href="/fukezhuanjia/gzfukezhuanjia/5733.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="contpzjlb6" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-zxh.jpg" alt="章向红" /></dt>
<dd><p class="zjtro"><strong>章向红</strong>　主任医师</p>
<p class="zjcz">接诊时间：每周三、六（上午）</p>
<p><b>她说：</b>我最开心的，莫过于看到患者康复时脸上灿烂的笑容，她们的健康就是我最大的收获。</p>
<p><b>专家简介：</b>广州市妇婴医院主任医师，副教授。从事妇产科临床医疗、管理、教学、科研、带教研究生和下乡医疗队工作等工作四十余年，先后担任医务科长、门......<a href="/fukezhuanjia/gzfukezhuanjia/5712.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj-lb"><ul>
<li id="tpzjlb1" onMouseOver="set2(‘tpzjlb‘,1,6)" class="hover">卓乐雯</li>
<li id="tpzjlb2" onMouseOver="set2(‘tpzjlb‘,2,6)">黄婉</li>
<li id="tpzjlb3" onMouseOver="set2(‘tpzjlb‘,3,6)">郑惠童</li>
<li id="tpzjlb4" onMouseOver="set2(‘tpzjlb‘,4,6)">卢慧玲</li>
<li id="tpzjlb5" onMouseOver="set2(‘tpzjlb‘,5,6)">舒慧芳</li>
<li id="tpzjlb6" onMouseOver="set2(‘tpzjlb‘,6,6)">章向红</li></ul></div></div>
<div class="nzzj-con" id="contpqw2" style="display:none;">
<div class="tpzj" id="conqwzjlb1" style="display:block;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-ayz.jpg" alt="安亚珍" /></dt>
<dd><p class="zjtro"><strong>安亚珍</strong>　副主任医师</p>
<p class="zjcz">接诊时间：每周一、二、四、六、日（全天）</p>
<p><b>她说：</b>作为一个女人，我不为当初的选择后悔，我只有骄傲。</p>
<p><b>专家简介：</b>从事妇产科工作三十余年，治疗不孕不育有独到的治疗方法，特别是针对输卵管粘连，阻塞的治疗。在不孕不育科、妇科等领域有较深的造诣。对各种原因引起的继发......<a href="/fukezhuanjia/gzfukezhuanjia/3660.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="conqwzjlb2" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-jyq.jpg" alt="江依群" /></dt>
<dd><p class="zjtro"><strong>江依群</strong>　主任医师</p>
<p class="zjcz">接诊时间：每周一、二、三、四、五（全天）</p>
<p><b>她说：</b>没有安全的药物，只有安全的医生。</p>
<p><b>专家简介：</b>江主任曾先后在国家级、省级刊物上发表多篇论文，参与主编《妇科肿瘤手术精选》、《简明妇科肿瘤学》等书籍。并多次受邀参加中华医学会、北京不孕不育学......<a href="/fukezhuanjia/gzfukezhuanjia/2429.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="conqwzjlb3" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-yy.jpg" alt="杨艳" /></dt>
<dd><p class="zjtro"><strong>杨艳</strong>　副主任医师</p>
<p class="zjcz"></p>
<p><b>她说：</b>多大的荣誉，也抵不过一条新生命的顺利诞生来得有成就感！</p>
<p><b>专家简介：</b>从事产科临床工作30余年，期间曾在一级杂志发表论文二十余篇，两次获得军队医疗最高荣誉"白求恩式先进工......<a href="/fukezhuanjia/gzfukezhuanjia/2455.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="conqwzjlb4" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-pjy.jpg" alt="于晗" /></dt>
<dd><p class="zjtro"><strong>于晗</strong>　 副主任医师</p>
<p class="zjcz"></p>
<p><b>她说：</b>作为一名产科医生，对于我来说，这是一份快乐的职业，每天与孕妇分享她们孕期的每一个喜悦，和她迎接宝宝的诞生是我最快乐的事情。</p>
<p><b>专家简介：</b>毕业于辽宁大学，从事妇科临床工作二十余年，技术全面，临床经验丰富，曾在北京医科大学进修学习，在《中华妇产科学》等杂志发表论文多篇，擅长运用中西医......<a href="http://fk.dayoo.com/fukezhuanjia/gzfukezhuanjia/3673.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="conqwzjlb5" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-lz.jpg" alt="李智" /></dt>
<dd><p class="zjtro"><strong>李智</strong>　副主任医师</p>
<p class="zjcz"></p>
<p><b>她说：</b>我时刻要求自己要对得起医生这个称谓，以最快最省的治疗方案解除病人的痛苦。</p>
<p><b>专家简介：</b>李主任从事妇科临床诊疗及研究工作，具有系统扎实的妇科理论知识和丰富的临床经验。对女性阴道炎、宫颈炎、盆腔炎、子宫肌瘤、卵巢囊肿、无痛人工流产、引产等......<a href="/fukezhuanjia/gzfukezhuanjia/3667.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj" id="conqwzjlb6" style="display:none;">
<dl><dt><img src="http://fk.dayoo.com/images/tpzj-ll.jpg" alt="李蕾" /></dt>
<dd><p class="zjtro"><strong>李蕾</strong>　副主任医师</p>
<p class="zjcz"></p>
<p><b>她说：</b>妇科，有时别轻看小问题，有时候它可以让你痛苦不堪，所以我从来都是认真对待每一个问题。</p>
<p><b>专家简介：</b>李主任从事妇科临床工作多年，擅长运用高科技手段治疗各种妇科炎症、前庭大腺囊肿、功能性子宫出血与子宫内膜异位症等妇科常见病、多发病与疑难杂症......<a href="/fukezhuanjia/gzfukezhuanjia/3668.html">【详细】</a></p>
</dd></dl></div>
<div class="tpzj-lb"><ul>
<li id="qwzjlb1" onMouseOver="set2(‘qwzjlb‘,1,6)" class="hover">安亚珍</li>
<li id="qwzjlb2" onMouseOver="set2(‘qwzjlb‘,2,6)">江依群</li>
<li id="qwzjlb3" onMouseOver="set2(‘qwzjlb‘,3,6)">杨艳</li>
<li id="qwzjlb4" onMouseOver="set2(‘qwzjlb‘,4,6)">于晗</li>
<li id="qwzjlb5" onMouseOver="set2(‘qwzjlb‘,5,6)">李智</li>
<li id="qwzjlb6" onMouseOver="set2(‘qwzjlb‘,6,6)">李蕾</li></ul></div></div>

　　需要的筒子们，可以拿去看看.相信你要你们弄懂原理，出手的肯定比我这菜鸟强！