作者：强毛 | 来源：互联网 | 2022-09-20 15:58
现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生Javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。
效果图如下：
html代码：
代码如下:
首页首页首页首页首页首页首页首页首页首页
技术技术技术技术技术技术技术技术技术技术
生活生活生活生活生活生活生活生活生活生活
作品作品作品作品作品作品作品作品作品作品
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 知识，随意写的一些效果。
京公网安备 11010802041100号