一个简单的tab选项卡实例

结构:

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

posted @ 2011-03-07 20:30  chemdemo  阅读(616)  评论(0编辑  收藏  举报