自己写的一个选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品分类</title>
<style type='text/css'>
</style>
<script type="text/javascript">
//构造一个选项卡
function TabControl(parentObj,navClass,navClickClass,tabParentClass) {
//查找某个元素指定类型的子元素
var child=function(parent,tagName){
var arr=[];
for(var i=0;i<parent.childNodes.length;i++)
{
if(parent.childNodes[i].nodeName.toLowerCase()==tagName)
{
arr.push(parent.childNodes[i]);
}
}
return arr;
}
//根据一个css类名或者一个css属性集合对象设置某个元素的样式
var setClass=function(ele,className){
if(ele)
{
var type=typeof className;
if("string"==type)
{
ele.className=className;
}else if("object"==type)
{
for(var attr in className)
{
ele.style[attr]=className[attr];
}
}
}
};
//若没有指定样式，则指定默认样式
if(!navClass)
{
//IE需要styleFloat才行，float无效（真郁闷）
navClass={"float":"left",styleFloat:"left",cssFloat:"left",padding:"8px 15px",fontWeight:"normal",lineHeight:"30px",cursor:"pointer",border:"1px solid #D2D2D2",marginRight:"8px",borderBottom:"1px solid white",zIndex:2,backgroundRepeat:"repeat-x",position:"static"};
}
if(!navClickClass)
{
navClickClass={position:"relative",fontWeight:"bold"};
}
if(!tabParentClass)
{
tabParentClass={position:"relative",clear:"left",border:"1px solid #D2D2D2",zIndex: 1,top:"-1px"};
}
var divArr=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=[];
var navArr=this.navArr;
var tabArr=this.tabArr;
this.navParent.style.listStyle="none";
//当前被选中的选项卡在navArr和tabArr数组中的索引
var currentIndex=0;
for (var i = 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 (var i = 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 (var i = 0; i < navArr.length; i++) {
var nav=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>
<!--页面右边主体的选项卡部分-->
<div id="main">
<!--选项卡的导航-->
<div>
<ul>
<li style="margin-left: 5px;">商品详情</li>
<li>详细参数</li>
<li>相关商品</li>
<li>商品评论</li>
</ul>
</div>
<!--选项卡的内容-->
<div>
<!--商品介绍等等-->
<div style="padding-left: 10px;">
<h3>
产品介绍：</h3>
<br />
AGESTAR作为台湾老牌电脑周边配件工厂，无论是在产品研发，还是在PCB设计都有着非常扎实的根基和实力，此次推出的USB3.0接口的2.5寸硬盘盒，是真正意义的USB3.0，而且AGESTAR目前已经过了NEC的专业级测试（AGESTAR
所有 USB3.0的产品，包括USB3.0扩展卡都已通过最为NEC严格的测试和认证，这是很多其它通过炒作NEC 3.0芯片厂商无法做到的！）<br />
agestar 3ub2a8移动硬盘盒以黑色为主色调，超薄设计，做工非常扎实，表面是黑色铝拉丝效果，采用厚度为1mm的铝合金材质打造，带来了非常出色的抗压能力，可以说我们不小心踩在上面都不会让脆弱的硬盘受到损伤，同时也能让硬盘的热量能够更加及时地散发出去，保证硬盘稳定地工作。
</div>
<!--商品详细参数-->
<div>
<h2>
详细参数</h2>
详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数
</div>
<!--相关商品-->
<div>
<h2>
相关商品</h2>
<!--相关商品中的三张图片-->
<div>
<br />
ORCIO AC350 硬盘固定片（可内置外置）<br />
<br />
</div>
</div>
<!--商品评论-->
<div>
<h2>
商品评论</h2>
<!--评论部分-->
<div>
非会员顾客说: 10-01-01 19:18 回复此评论
<div>
看到好几次了，什么时候到货啊？
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var main=document.getElementById("main")
new TabControl(main);
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品分类</title>
<style type='text/css'>
</style>
<script type="text/javascript">
//构造一个选项卡
function TabControl(parentObj,navClass,navClickClass,tabParentClass) {
//查找某个元素指定类型的子元素
var child=function(parent,tagName){
var arr=[];
for(var i=0;i<parent.childNodes.length;i++)
{
if(parent.childNodes[i].nodeName.toLowerCase()==tagName)
{
arr.push(parent.childNodes[i]);
}
}
return arr;
}
//根据一个css类名或者一个css属性集合对象设置某个元素的样式
var setClass=function(ele,className){
if(ele)
{
var type=typeof className;
if("string"==type)
{
ele.className=className;
}else if("object"==type)
{
for(var attr in className)
{
ele.style[attr]=className[attr];
}
}
}
};
//若没有指定样式，则指定默认样式
if(!navClass)
{
//IE需要styleFloat才行，float无效（真郁闷）
navClass={"float":"left",styleFloat:"left",cssFloat:"left",padding:"8px 15px",fontWeight:"normal",lineHeight:"30px",cursor:"pointer",border:"1px solid #D2D2D2",marginRight:"8px",borderBottom:"1px solid white",zIndex:2,backgroundRepeat:"repeat-x",position:"static"};
}
if(!navClickClass)
{
navClickClass={position:"relative",fontWeight:"bold"};
}
if(!tabParentClass)
{
tabParentClass={position:"relative",clear:"left",border:"1px solid #D2D2D2",zIndex: 1,top:"-1px"};
}
var divArr=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=[];
var navArr=this.navArr;
var tabArr=this.tabArr;
this.navParent.style.listStyle="none";
//当前被选中的选项卡在navArr和tabArr数组中的索引
var currentIndex=0;
for (var i = 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 (var i = 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 (var i = 0; i < navArr.length; i++) {
var nav=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>
<!--页面右边主体的选项卡部分-->
<div id="main">
<!--选项卡的导航-->
<div>
<ul>
<li style="margin-left: 5px;">商品详情</li>
<li>详细参数</li>
<li>相关商品</li>
<li>商品评论</li>
</ul>
</div>
<!--选项卡的内容-->
<div>
<!--商品介绍等等-->
<div style="padding-left: 10px;">
<h3>
产品介绍：</h3>
<br />
AGESTAR作为台湾老牌电脑周边配件工厂，无论是在产品研发，还是在PCB设计都有着非常扎实的根基和实力，此次推出的USB3.0接口的2.5寸硬盘盒，是真正意义的USB3.0，而且AGESTAR目前已经过了NEC的专业级测试（AGESTAR
所有 USB3.0的产品，包括USB3.0扩展卡都已通过最为NEC严格的测试和认证，这是很多其它通过炒作NEC 3.0芯片厂商无法做到的！）<br />
agestar 3ub2a8移动硬盘盒以黑色为主色调，超薄设计，做工非常扎实，表面是黑色铝拉丝效果，采用厚度为1mm的铝合金材质打造，带来了非常出色的抗压能力，可以说我们不小心踩在上面都不会让脆弱的硬盘受到损伤，同时也能让硬盘的热量能够更加及时地散发出去，保证硬盘稳定地工作。
</div>
<!--商品详细参数-->
<div>
<h2>
详细参数</h2>
详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数详细参数
</div>
<!--相关商品-->
<div>
<h2>
相关商品</h2>
<!--相关商品中的三张图片-->
<div>
<br />
ORCIO AC350 硬盘固定片（可内置外置）<br />
<br />
</div>
</div>
<!--商品评论-->
<div>
<h2>
商品评论</h2>
<!--评论部分-->
<div>
非会员顾客说: 10-01-01 19:18 回复此评论
<div>
看到好几次了，什么时候到货啊？
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var main=document.getElementById("main")
new TabControl(main);
</script>
