当前位置:asp编程网>技术教程>Css3教程>  正文

通用的CSS滑动门技术实现TAB标签代码

1970-01-01 08:00:00   来源:www.aspprogram.cn    作者:wangsdong   浏览量:2768   收藏

一个页面上有很多个TAB标签,总不能每一个写一次吧?于是自己写了一个通用的javascript代码。代码如下:
<style type="text/css">
body{
 font-size:12px;
}
ul{
 margin:0px;
 padding:0px;
}
li{
 list-style-type:none;
 font-size:14px;
 padding-left:10px;
 height:25px;
 line-height:25px;
}
.c1{
 border:1px #f00 solid;
 width:150px;
 float:left;
 background-color:#CCCCCC;
 color:#FF0000;
}
.c2{
 border:1px #666666 solid;
 width:150px;
 float:left;
}
.a1{
 border:1px solid #999999;
 width:500px;
 line-height:22px;
}
.a1 a{
 width:120px;
 float:left;
 margin-left:10px;
}
</style>
<script type="text/javascript">
/*
 功能:通用的CSS滑动门技术实现TAB标签代码
 来源:www.aspprogram.cn
 作者:wangsdong
 原创文章,转载请保留此信息。
*/
/*
 thisObj为当前ID
 Num为当前第几个tab
 str为下面层的ID前面的字符串,除数字以外
 class1为当前类
 class2为隐藏类
 TagName为thisObj下面的name名
*/
function nTabs(thisObj,Num,str,class1,class2,TagName)
{
 if(thisObj.className == class1)return;
 var tabObj = thisObj.parentNode.id;
 var tabList = document.getElementById(tabObj).getElementsByTagName(TagName);
 for(i=0;i<tabList.length; i++)
 {
  if (i == Num)
  {
     thisObj.className = class1;     
     document.getElementById(str+i).style.display = "block";
  }else{
    tabList[i].className = class2;
    document.getElementById(str+i).style.display = "none";
  }
 }
}
</script>
 <div class="technical_infor2">
   <ul class="ntab1" id="myTab">
     <li class="c1" onmouseover="nTabs(this,0,'Content','c1','c2','li');">电子元件</li>
     <li class="c2" onmouseover="nTabs(this,1,'Content','c1','c2','li');">电子器件</li>
     <li class="c2" onmouseover="nTabs(this,2,'Content','c1','c2','li');">其他产品</li>
   </ul>
   <div style="clear:both;"></div>
   <div class="a1" style="display:block" id="Content0">
      <a href="#">分类1</a><a href="#">分类1</a><a href="#">分类1</a>
   </div>
   <div  class="a1" style="display:none" id="Content1">
     <a href="#">分类2</a><a href="#">分类2</a><a href="#">分类2</a>
   </div>
   <div class="a1" style="display:none" id="Content2">
      <a href="#">分类3</a><a href="#">分类3</a><a href="#">分类3</a>
   </div>
 </div>
如果页面上有多个TAB标签,只要修改一下nTabs函数里面的参数就行了。



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网