JS控制下的双层Tab切换

最新推荐文章于 2022-08-16 10:11:33 发布

置顶

滴雕佐刃

最新推荐文章于 2022-08-16 10:11:33 发布

阅读量2.3k

点赞数

分类专栏： JS控制文章标签： JS控制 Tab切换

本文链接：https://blog.csdn.net/ourit/article/details/42080551

版权

本文探讨了如何使用JavaScript实现双层Tab切换的功能。通过理解切换原理，可以轻松完成这一任务。

摘要由CSDN通过智能技术生成

如题，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&g