欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-11 08:49:18
...
现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出。
效果图如下:
javascript实现tabs选项卡切换效果(自写原生js)_javascript技巧
html代码
复制代码 代码如下:





js-tabs






首页
技术
生活
作品


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


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


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


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








11111
22222
33333


11111111111111111111111111111111111


222222222222222222222222222222222222


333333333333333333333333333333333333333








其中 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 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 tabsContent[i].className = 'hide';
}
tabsContent[n].className = 'tabs-content';
}
function clearClass(){
for(var i = 0,len = tabsBtn.length; i tabsBtn[i].className = '';
}
}
}

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