javascript实现tabs选项卡切换效果(自写原生js)_javascript技巧



现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。
效果图如下：

html代码：
代码如下:

首页
技术
生活
作品

首页首页首页首页首页首页首页首页首页首页

技术技术技术技术技术技术技术技术技术技术

生活生活生活生活生活生活生活生活生活生活

作品作品作品作品作品作品作品作品作品作品

11111
22222
33333

11111111111111111111111111111111111

222222222222222222222222222222222222

333333333333333333333333333333333333333

window.onload = function(){
tabs('tabs','click');
tabs('tabs2','mouseover');
}


其中 base.css 参考我的CSS框架——base.css。
javascript 代码：
代码如下:
function tabs(id,trigger){
var tabsBtn = document.getElementById(id).getElementsByTagName('h2')[0].getElementsByTagName('a');
var tabsContent = document.getElementById(id).getElementsByTagName('p');
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].index = i;
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
clearClass();
this.className = 'on';
showContent(this.index);
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
clearClass();
this.className = 'on';
showContent(this.index);
}
}
}
function showContent(n){
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsContent[i].className = 'hide';
}
tabsContent[n].className = 'tabs-content';
}
function clearClass(){
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].className = '';
}
}
}

注意：
1、标题如首页、技术、生活和作品是在 h2 标签中。
2、显示当前标题使用 class 名为 on 的类，如果修改成其他 class 的如 selected，就需要修改 tabs.js 中相对应的内容。
3、标题所对应的内容是在 p 标签中。p 标签中不能再有 p 标签。
PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。