一个简单的tab选项卡实例

<div class="demo">
<ul id="tab_t1" class="hd">
<li>新闻</li>
<li>视频</li>
<li>图片</li>
</ul>
<ul id="tab_c1" class="bd">
<li class="news">
我正要推开车门，他从身后挽住了我的腰，我不由自主回头，触到他如星子一般的眼眸："康楠......如果觉得辛苦，一定要告诉我，让我替你分担。从现在开始，你不再是一个人了，明白了吗？"
</li>
<li class="videos">
我站在转弯的街角，清风吹拂，将我的裙角微微掀起，我只得捏着裙摆，浏览着街边小店的橱窗打发时间。时间一分一秒地过去，林默风迟迟没有出现。终于听到小车的轰鸣声，奥迪停在了路口，玻璃摇下来，戴着墨镜的林默风面无表情地注视着我，看着我向他走过来。他今天也穿得十分休闲随意，一件蓝色格子的鳄鱼T恤和白色休闲裤，一只手放松地搭在车窗玻璃上，墨镜里，那双瞳仁目光灼灼地盯着我，仿佛想看穿我的心事。我不禁纳闷地问："你怎么了？"
</li>
<li class="photos">
爱情是场机遇，转瞬即逝，可惜在它闪现时许多人都往往没有来得及做好拥抱的准备。所以人世间才有那么多伤心的人儿，流泪的情歌，伤感的情怀……休完年假，我回到公司，却敏感地察觉到了一丝异样。办公室里气氛有些诡异，大家瞄着我的眼神也带着莫名其妙的同情。我的心里浮现一丝不祥的预感，他们怎么了？我只离开了4天，是不是工作上出什么事了？
</li>
</ul>
</div>

var $ = function(id) {
return document.getElementById(id);
};

function getChildNode(superNode, index) {
/*
* 功能说明：
* 传入父元素节点，按照index顺序查找子节点，从1开始（注意：只针对元素节点）
* 如果不传入index或index是0，则返回所有子节点
*/
if(!superNode.childNodes) return;
//if (typeof index !== 'number') { alert('请输入数字索引'); return; }
index = Number(index) || 0;
var subNodes = [];
var result = null;

for(var i=0, len=superNode.childNodes.length; i<len; i++) {//得到所有子元素节点
var node = superNode.childNodes[i];
if(node.nodeType == 1) {
subNodes.push(node);
} else {
continue;
}
}

if(index === 0) {
result = subNodes;
} else {
for(var i= 0; i<subNodes.length; i++) {
subNodes[i].flag = i + 1;
if(subNodes[i].flag == index) {
result = subNodes[i];
break;
};
}
}

return result? result : alert('你输入的索引值对应的子节点不存在！');
}

function TabObj(tabT, tabC, index, type) {
this.index = Number(index) || 0;
this.type = Number(type) || 0;

this.btns = getChildNode(tabT, 0);
this.boxs = getChildNode(tabC, 0);

this.open(this.index);

for(var i=0; i<this.btns.length; i++) {
var _this = this;
this.btns[i].flag = i;
if(this.type == 0) {
this.btns[i].onmouseover = function() {
_this.open(this.flag);
};
} else {
this.btns[i].onclick = function() {
_this.open(this.flag);
};
}
}
}

TabObj.prototype = {
open: function(n) {
this.close();
this.btns
.className = 'open';
this.boxs
.className = 'block';
},
close: function() {
for(var i=0; i<this.btns.length; i++) {
this.btns[i].className = 'close';
this.boxs[i].className = 'hidden';
}
}
}

window.onload = function() {
var tabObj1 = new TabObj($('tab_t1'), $('tab_c1'));
var tabObj2 = new TabObj($('tab_t2'), $('tab_c2'), 1, 1);
}