一个页面上有很多个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函数里面的参数就行了。