结构:
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 >
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