html控制自动切换选项卡速度,javascript实现tabs选项卡切换效果(自写原生js)

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

效果图如下：

 

html代码：

js-tabs

a{color:#a0b3d6;}

.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}

.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}

.tabs-nav .on{background:white;border-bottom:1px solid white;_position:relative;}

.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}

首页

技术

生活

作品

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

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

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

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

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 知识，随意写的一些效果。