一个简单的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[n].className = 'open';
		this.boxs[n].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);
}

说明：定义了两种类型的事件，即鼠标移上去切换或者鼠标点击切换；另外，还可以自行定义页面载入时选项卡停在那里，默认是第一个按钮上。

最后，请单击查看Demo