JS控制下的双层Tab切换

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

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

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

JS控制下的双层Tab切换相关推荐

js+css实例超漂亮tab切换选项卡代码
效果图: 代码:切换效果,要点击才能实现. js+css实例超漂亮tab切换选项卡代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
JS底层书写的简单Tab切换！
Tab切换 1.题目参照某宝网一个商品详情页,写出tab切换的功能,样式不限,实现功能即可(对dom元素操作) 2.写法与思路 (1).对给到的要求我们首先去某宝网看一下效果图,可以清晰的发现,大的 ...
用JS控制下拉菜单效果
今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写 ...
js控制下拉框默认选中第一个值
<td><select type="text" class="form-control" id="startOppn" n ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
bootstrap 标签页tab切换js（含报错原因）
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
自定义Tab切换+自定义CheckBox+light7无限滑动/下拉刷新
这是一篇记录型的技术杂文,记录了这段时间做的一些小模块样式,正文之前先记录一下html上下标的写法,转载自 https://blog.csdn.net/bingle14/article/details ...
html+css+js TAB切换
1,效果图 2.html部分 <!DOCTYPE html> <html> <head lang="en"><meta charset=& ...
原生js实现Tab切换
本课标题: Tab切换引入话术: 咱们刚才讲了,碰壁反弹,拖拽盒子,这两个动画,用到了offset系列,client系列,咱们是不是还要计算,对吧,比较麻烦,咱们再讲一个比较简单一点的动画,tab切 ...

JS控制下的双层Tab切换

JS控制下的双层Tab切换相关推荐

最新文章

热门文章