自己写的一个选项卡
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>产品分类</title>
<styletype='text/css'>
</style>
<scripttype="text/javascript">
//构造一个选项卡
functionTabControl(parentObj,navClass,navClickClass,tabParentClass){
//查找某个元素指定类型的子元素
varchild=function(parent,tagName){
vararr=[];
for(vari=0;i<parent.childNodes.length;i++)
{
if(parent.childNodes[i].nodeName.toLowerCase()==tagName)
{
arr.push(parent.childNodes[i]);
}
}
returnarr;
}
//根据一个css类名或者一个css属性集合对象设置某个元素的样式
varsetClass=function(ele,className){
if(ele)
{
vartype=typeofclassName;
if("string"==type)
{
ele.className=className;
}elseif("object"==type)
{
for(varattrinclassName)
{
ele.style[attr]=className[attr];
}
}
}
};
//若没有指定样式，则指定默认样式
if(!navClass)
{
//IE需要styleFloat才行，float无效（真郁闷）
navClass={"float":"left",styleFloat:"left",cssFloat:"left",padding:"8px15px",fontWeight:"normal",lineHeight:"30px",cursor:"pointer",border:"1pxsolid#D2D2D2",marginRight:"8px",borderBottom:"1pxsolidwhite",zIndex:2,backgroundRepeat:"repeat-x",position:"static"};
}
if(!navClickClass)
{
navClickClass={position:"relative",fontWeight:"bold"};
}
if(!tabParentClass)
{
tabParentClass={position:"relative",clear:"left",border:"1pxsolid#D2D2D2",zIndex:1,top:"-1px"};
}
vardivArr=child(parentObj,"div");
if(2!=divArr.length)
{
return;
}
this.navParent=divArr[0].getElementsByTagName("ul")[0];
this.tabParent=divArr[1];
setClass(this.tabParent,tabParentClass);
//选项卡中的所有li选项
this.navArr=[];
//选项卡中所有li选项所对应的div内容
this.tabArr=[];
varnavArr=this.navArr;
vartabArr=this.tabArr;
this.navParent.style.listStyle="none";
//当前被选中的选项卡在navArr和tabArr数组中的索引
varcurrentIndex=0;
for(vari=0;i<this.navParent.childNodes.length;i++){
//找到选项卡的每个导航，按顺序存到数组navArr中
if(this.navParent.childNodes[i].nodeName.toLowerCase()=="li"){
navArr.push(this.navParent.childNodes[i]);
this.navParent.childNodes[i].setAttribute("index",this.navArr.length-1);
}
}
for(vari=0;i<this.tabParent.childNodes.length;i++){
//找到选项卡的每个卡片，按顺序存到数组tabArr中
if(this.tabParent.childNodes[i].nodeName.toLowerCase()=="div"){
tabArr.push(this.tabParent.childNodes[i]);
this.tabParent.childNodes[i].setAttribute("index",this.tabArr.length-1);
}
}
//如果选项卡数量与导航数量不相等，则返回
if(navArr.length!=tabArr.length)
{
this.success=false;
return;
}
for(vari=0;i<navArr.length;i++){
varnav=navArr[i];
setClass(navArr[i],navClass);
nav.style.float="left";
tabArr[i].style.display="none";
//给每个导航设置onclick事件
nav.onclick=function(){
tabArr[currentIndex].style.display="none";
setClass(navArr[currentIndex],navClass);
currentIndex=this.getAttribute("index");
tabArr[currentIndex].style.display="block";
setClass(navArr[currentIndex],navClickClass);
}
}
navArr[currentIndex].onclick();
}
</script>
</head>
<body>
<!--页面右边主体的选项卡部分-->
<divid="main">
<!--选项卡的导航-->
<div>
<ul>
<listyle="margin-left:5px;">商品详情</li>
<li>详细参数</li>
<li>相关商品</li>
<li>商品评论</li>
</ul>
</div>
<!--选项卡的内容-->
<div>
<!--商品介绍等等-->
<divstyle="padding-left:10px;">
<h3>
产品介绍：</h3>
<br/>
AGESTAR作为台湾老牌电脑周边配件工厂，无论是在产品研发，还是在PCB设计都有着非常扎实的根基和实力，此次推出的USB3.0接口的2.5寸硬盘盒，是真正意义的USB3.0，而且AGESTAR目前已经过了NEC的专业级测试（AGESTAR
所有USB3.0的产品，包括USB3.0扩展卡都已通过最为NEC严格的测试和认证，这是很多其它通过炒作NEC3.0芯片厂商无法做到的！）<br/>
agestar3ub2a8移动硬盘盒以黑色为主色调，超薄设计，做工非常扎实，表面是黑色铝拉丝效果，采用厚度为1mm的铝合金材质打造，带来了非常出色的抗压能力，可以说我们不小心踩在上面都不会让脆弱的硬盘受到损伤，同时也能让硬盘的热量能够更加及时地散发出去，保证硬盘稳定地工作。
</div>
<!--商品详细参数-->
<div>
<h2>
详细参数</h2>
详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数
</div>
<!--相关商品-->
<div>
<h2>
相关商品</h2>
<!--相关商品中的三张图片-->
<div>
<br/>
ORCIOAC350硬盘固定片（可内置外置）<br/>
<br/>
</div>
</div>
<!--商品评论-->
<div>
<h2>
商品评论</h2>
<!--评论部分-->
<div>
非会员顾客说: 10-01-0119:18回复此评论
<div>
看到好几次了，什么时候到货啊？
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<scripttype="text/javascript">
varmain=document.getElementById("main")
newTabControl(main);
</script> 优质内容筛选与推荐>>
1、各种模板
2、WatchMan
3、A1001 整除问题
4、成功三步曲：有勇、有谋、有德
5、ABAP使用函数把excel读入ABAP内表
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>产品分类</title>
<styletype='text/css'>
</style>
<scripttype="text/javascript">
//构造一个选项卡
functionTabControl(parentObj,navClass,navClickClass,tabParentClass){
//查找某个元素指定类型的子元素
varchild=function(parent,tagName){
vararr=[];
for(vari=0;i<parent.childNodes.length;i++)
{
if(parent.childNodes[i].nodeName.toLowerCase()==tagName)
{
arr.push(parent.childNodes[i]);
}
}
returnarr;
}
//根据一个css类名或者一个css属性集合对象设置某个元素的样式
varsetClass=function(ele,className){
if(ele)
{
vartype=typeofclassName;
if("string"==type)
{
ele.className=className;
}elseif("object"==type)
{
for(varattrinclassName)
{
ele.style[attr]=className[attr];
}
}
}
};
//若没有指定样式，则指定默认样式
if(!navClass)
{
//IE需要styleFloat才行，float无效（真郁闷）
navClass={"float":"left",styleFloat:"left",cssFloat:"left",padding:"8px15px",fontWeight:"normal",lineHeight:"30px",cursor:"pointer",border:"1pxsolid#D2D2D2",marginRight:"8px",borderBottom:"1pxsolidwhite",zIndex:2,backgroundRepeat:"repeat-x",position:"static"};
}
if(!navClickClass)
{
navClickClass={position:"relative",fontWeight:"bold"};
}
if(!tabParentClass)
{
tabParentClass={position:"relative",clear:"left",border:"1pxsolid#D2D2D2",zIndex:1,top:"-1px"};
}
vardivArr=child(parentObj,"div");
if(2!=divArr.length)
{
return;
}
this.navParent=divArr[0].getElementsByTagName("ul")[0];
this.tabParent=divArr[1];
setClass(this.tabParent,tabParentClass);
//选项卡中的所有li选项
this.navArr=[];
//选项卡中所有li选项所对应的div内容
this.tabArr=[];
varnavArr=this.navArr;
vartabArr=this.tabArr;
this.navParent.style.listStyle="none";
//当前被选中的选项卡在navArr和tabArr数组中的索引
varcurrentIndex=0;
for(vari=0;i<this.navParent.childNodes.length;i++){
//找到选项卡的每个导航，按顺序存到数组navArr中
if(this.navParent.childNodes[i].nodeName.toLowerCase()=="li"){
navArr.push(this.navParent.childNodes[i]);
this.navParent.childNodes[i].setAttribute("index",this.navArr.length-1);
}
}
for(vari=0;i<this.tabParent.childNodes.length;i++){
//找到选项卡的每个卡片，按顺序存到数组tabArr中
if(this.tabParent.childNodes[i].nodeName.toLowerCase()=="div"){
tabArr.push(this.tabParent.childNodes[i]);
this.tabParent.childNodes[i].setAttribute("index",this.tabArr.length-1);
}
}
//如果选项卡数量与导航数量不相等，则返回
if(navArr.length!=tabArr.length)
{
this.success=false;
return;
}
for(vari=0;i<navArr.length;i++){
varnav=navArr[i];
setClass(navArr[i],navClass);
nav.style.float="left";
tabArr[i].style.display="none";
//给每个导航设置onclick事件
nav.onclick=function(){
tabArr[currentIndex].style.display="none";
setClass(navArr[currentIndex],navClass);
currentIndex=this.getAttribute("index");
tabArr[currentIndex].style.display="block";
setClass(navArr[currentIndex],navClickClass);
}
}
navArr[currentIndex].onclick();
}
</script>
</head>
<body>
<!--页面右边主体的选项卡部分-->
<divid="main">
<!--选项卡的导航-->
<div>
<ul>
<listyle="margin-left:5px;">商品详情</li>
<li>详细参数</li>
<li>相关商品</li>
<li>商品评论</li>
</ul>
</div>
<!--选项卡的内容-->
<div>
<!--商品介绍等等-->
<divstyle="padding-left:10px;">
<h3>
产品介绍：</h3>
<br/>
AGESTAR作为台湾老牌电脑周边配件工厂，无论是在产品研发，还是在PCB设计都有着非常扎实的根基和实力，此次推出的USB3.0接口的2.5寸硬盘盒，是真正意义的USB3.0，而且AGESTAR目前已经过了NEC的专业级测试（AGESTAR
所有USB3.0的产品，包括USB3.0扩展卡都已通过最为NEC严格的测试和认证，这是很多其它通过炒作NEC3.0芯片厂商无法做到的！）<br/>
agestar3ub2a8移动硬盘盒以黑色为主色调，超薄设计，做工非常扎实，表面是黑色铝拉丝效果，采用厚度为1mm的铝合金材质打造，带来了非常出色的抗压能力，可以说我们不小心踩在上面都不会让脆弱的硬盘受到损伤，同时也能让硬盘的热量能够更加及时地散发出去，保证硬盘稳定地工作。
</div>
<!--商品详细参数-->
<div>
<h2>
详细参数</h2>
详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数
</div>
<!--相关商品-->
<div>
<h2>
相关商品</h2>
<!--相关商品中的三张图片-->
<div>
<br/>
ORCIOAC350硬盘固定片（可内置外置）<br/>
<br/>
</div>
</div>
<!--商品评论-->
<div>
<h2>
商品评论</h2>
<!--评论部分-->
<div>
非会员顾客说: 10-01-0119:18回复此评论
<div>
看到好几次了，什么时候到货啊？
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<scripttype="text/javascript">
varmain=document.getElementById("main")
newTabControl(main);
</script> 优质内容筛选与推荐>>
1、各种模板
2、WatchMan
3、A1001 整除问题
4、成功三步曲：有勇、有谋、有德
5、ABAP使用函数把excel读入ABAP内表