js实现tab效果的源代码代码
tab的代码有很多写法，其实它的原理很简单：当鼠标滑过或单击tab时，相应的panel就显示，其它panel隐藏。我想不用Jquery，并且，函数用最少的参数-一个参数（你单击tab的索引值），在WinFormc程序中也有这种组件。
代码代码
在写代码的过程中，遇到的一个问题是HtmlObject的childNodes属性在不同浏览器中得到不同值（主要IE、FF），在FF标签结束的所有其它的也算是HtmlObject的子元素。所以必须处理一下。
XHTML代码结构：
代码
1 <div class="introCon" id="tab">
2 <ul class="tabs tc" >
3 <li><a href="#" class="selected" onmouseover="switchTab('tab',1);">Oracle认证</a></li>
4 <li class="split"></li>
5 <li><a href="#" onmouseover="switchTab('tab',2);">3G培训</a></li>
6 <li class="split"></li>
7 <li><a href="#" onmouseover="switchTab('tab',3);">职业教育</a></li>
8 <li class="split"></li>
9 <li><a href="#" onmouseover="switchTab('tab',4);">Intel培训</a></li>
10 <li class="split"></li>
11 <li><a href="#" onmouseover="switchTab('tab',5);">考试中心</a></li>
12 <li class="split"></li>
13 <li><a href="#" onmouseover="switchTab('tab',6);">网络课程</a></li>
14 <li class="split"></li>
15 <li><a href="#" onmouseover="switchTab('tab',7);">企业内训</a></li>
16 </ul>
17 <div class="panel">
18 <ul >
19 <li>Oracle认证课程一</li>
20 <li>Oracle认证课程二</li>
21 <li>Oracle认证课程三</li>
22 <li>Oracle认证课程四</li>
23 </ul>
24 <div class="details">
25 <p>11Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
26 </p>
27 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
28 </div>
29 </div>
30 <div class="panel">
31 <ul >
32 <li>Oracle认证课程一</li>
33 <li>Oracle认证课程二</li>
34 <li>Oracle认证课程三</li>
35 <li>Oracle认证课程四</li>
36 </ul>
37 <div class="details">
38 <p>22Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
39 </p>
40 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
41 </div>
42 </div>
43 <div class="panel">
44 <ul >
45 <li>Oracle认证课程一</li>
46 <li>Oracle认证课程二</li>
47 <li>Oracle认证课程三</li>
48 <li>Oracle认证课程四</li>
49 </ul>
50 <div class="details">
51 <p>33Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
52 </p>
53 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
54 </div>
55 </div>
56 <div class="panel">
57 <ul >
58 <li>Oracle认证课程一</li>
59 <li>Oracle认证课程二</li>
60 <li>Oracle认证课程三</li>
61 <li>Oracle认证课程四</li>
62 </ul>
63 <div class="details">
64 <p>44Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
65 </p>
66 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
67 </div>
68 </div>
69 <div class="panel">
70 <ul >
71 <li>Oracle认证课程一</li>
72 <li>Oracle认证课程二</li>
73 <li>Oracle认证课程三</li>
74 <li>Oracle认证课程四</li>
75 </ul>
76 <div class="details">
77 <p>55Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
78 </p>
79 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
80 </div>
81 </div>
82 <div class="panel">
83 <ul >
84 <li>Oracle认证课程一</li>
85 <li>Oracle认证课程二</li>
86 <li>Oracle认证课程三</li>
87 <li>Oracle认证课程四</li>
88 </ul>
89 <div class="details">
90 <p>66Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
91 </p>
92 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
93 </div>
94 </div>
95 <div class="panel">
96 <ul >
97 <li>Oracle认证课程一</li>
98 <li>Oracle认证课程二</li>
99 <li>Oracle认证课程三</li>
100 <li>Oracle认证课程四</li>
101 </ul>
102 <div class="details">
103 <p>77Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
104 </p>
105 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
106 </div>
107 </div>
108 </div>
109 <div class="intro_r">
110 <div class="blank11"></div>
111 <div class="online">
112 <span>在线客户：</span>
113 <a href="#"><img src="pics/qq-1.jpg" alt=""/></a>
114 <a href="#"><img src="pics/qq-2.jpg" alt=""/></a>
115 <a href="#"><img src="pics/qq-3.jpg" alt=""/></a>
116 <a href="#"><img src="pics/qq-4.jpg" alt=""/></a>
117 </div>
118 <div class="blank"></div>
119 <div class="contact">
120 <h2>联系我们</h2>
121 <div class="content">
122 <p>教育热线：021-62932189</p>
123 <p>邮箱：oracle@onlinesjtu.com</p>
124 <address>地址：上海市江苏路500号电<span>信世界5楼511室</span></address>
125 <p>客服QQ：1071204206</p>
126 </div>
127 </div>
128 </div>
129 </div>
2 <ul class="tabs tc" >
3 <li><a href="#" class="selected" onmouseover="switchTab('tab',1);">Oracle认证</a></li>
4 <li class="split"></li>
5 <li><a href="#" onmouseover="switchTab('tab',2);">3G培训</a></li>
6 <li class="split"></li>
7 <li><a href="#" onmouseover="switchTab('tab',3);">职业教育</a></li>
8 <li class="split"></li>
9 <li><a href="#" onmouseover="switchTab('tab',4);">Intel培训</a></li>
10 <li class="split"></li>
11 <li><a href="#" onmouseover="switchTab('tab',5);">考试中心</a></li>
12 <li class="split"></li>
13 <li><a href="#" onmouseover="switchTab('tab',6);">网络课程</a></li>
14 <li class="split"></li>
15 <li><a href="#" onmouseover="switchTab('tab',7);">企业内训</a></li>
16 </ul>
17 <div class="panel">
18 <ul >
19 <li>Oracle认证课程一</li>
20 <li>Oracle认证课程二</li>
21 <li>Oracle认证课程三</li>
22 <li>Oracle认证课程四</li>
23 </ul>
24 <div class="details">
25 <p>11Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
26 </p>
27 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
28 </div>
29 </div>
30 <div class="panel">
31 <ul >
32 <li>Oracle认证课程一</li>
33 <li>Oracle认证课程二</li>
34 <li>Oracle认证课程三</li>
35 <li>Oracle认证课程四</li>
36 </ul>
37 <div class="details">
38 <p>22Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
39 </p>
40 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
41 </div>
42 </div>
43 <div class="panel">
44 <ul >
45 <li>Oracle认证课程一</li>
46 <li>Oracle认证课程二</li>
47 <li>Oracle认证课程三</li>
48 <li>Oracle认证课程四</li>
49 </ul>
50 <div class="details">
51 <p>33Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
52 </p>
53 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
54 </div>
55 </div>
56 <div class="panel">
57 <ul >
58 <li>Oracle认证课程一</li>
59 <li>Oracle认证课程二</li>
60 <li>Oracle认证课程三</li>
61 <li>Oracle认证课程四</li>
62 </ul>
63 <div class="details">
64 <p>44Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
65 </p>
66 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
67 </div>
68 </div>
69 <div class="panel">
70 <ul >
71 <li>Oracle认证课程一</li>
72 <li>Oracle认证课程二</li>
73 <li>Oracle认证课程三</li>
74 <li>Oracle认证课程四</li>
75 </ul>
76 <div class="details">
77 <p>55Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
78 </p>
79 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
80 </div>
81 </div>
82 <div class="panel">
83 <ul >
84 <li>Oracle认证课程一</li>
85 <li>Oracle认证课程二</li>
86 <li>Oracle认证课程三</li>
87 <li>Oracle认证课程四</li>
88 </ul>
89 <div class="details">
90 <p>66Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
91 </p>
92 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
93 </div>
94 </div>
95 <div class="panel">
96 <ul >
97 <li>Oracle认证课程一</li>
98 <li>Oracle认证课程二</li>
99 <li>Oracle认证课程三</li>
100 <li>Oracle认证课程四</li>
101 </ul>
102 <div class="details">
103 <p>77Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。<a href="#">>>>更多</a>
104 </p>
105 <p><a href="#">项目介绍</a> | <a href="#">最新开班</a> | <a href="#">师资介绍</a> | <a href="#">相关活动</a> | <a href="#">优秀学员</a> | <a href="#">相关招聘</a></p>
106 </div>
107 </div>
108 </div>
109 <div class="intro_r">
110 <div class="blank11"></div>
111 <div class="online">
112 <span>在线客户：</span>
113 <a href="#"><img src="pics/qq-1.jpg" alt=""/></a>
114 <a href="#"><img src="pics/qq-2.jpg" alt=""/></a>
115 <a href="#"><img src="pics/qq-3.jpg" alt=""/></a>
116 <a href="#"><img src="pics/qq-4.jpg" alt=""/></a>
117 </div>
118 <div class="blank"></div>
119 <div class="contact">
120 <h2>联系我们</h2>
121 <div class="content">
122 <p>教育热线：021-62932189</p>
123 <p>邮箱：oracle@onlinesjtu.com</p>
124 <address>地址：上海市江苏路500号电<span>信世界5楼511室</span></address>
125 <p>客服QQ：1071204206</p>
126 </div>
127 </div>
128 </div>
129 </div>
css代码省略。。。
javascript代码：
代码function $(id){
return typeof id=="string"?document.getElementById(id):id;
}
/* 获取对象的所有子女 */
function getChilds(parent){
var nodes=parent.childNodes;
var childs=new Array();
for(var num=0;num<nodes.length;num++){
if(nodes[num].nodeName=="#text")
continue;
else
childs.push(nodes[num]);
}
return childs;
}
/* 选项卡效果 */
function switchTab(id,index){
var panels=getChilds($(id));
var tabs=panels[0].getElementsByTagName("a");
for(var i=1;i<tabs.length;i++){
if(i==index){
tabs[i-1].className="selected";
panels[i].style.display="block";
}
else{
panels[i].style.display="none";
tabs[i-1].className="";
}
}
}
return typeof id=="string"?document.getElementById(id):id;
}
/* 获取对象的所有子女 */
function getChilds(parent){
var nodes=parent.childNodes;
var childs=new Array();
for(var num=0;num<nodes.length;num++){
if(nodes[num].nodeName=="#text")
continue;
else
childs.push(nodes[num]);
}
return childs;
}
/* 选项卡效果 */
function switchTab(id,index){
var panels=getChilds($(id));
var tabs=panels[0].getElementsByTagName("a");
for(var i=1;i<tabs.length;i++){
if(i==index){
tabs[i-1].className="selected";
panels[i].style.display="block";
}
else{
panels[i].style.display="none";
tabs[i-1].className="";
}
}
}
