現在的頁面上有許多各種各樣的頁面效果，常用的有彈出層效果，無縫滾動效果，選項卡切換效果。今天分享一款自己用原生javascript寫的選項卡切換效果，由於本人水平有限，如有問題請指出。
效果圖如下：
html程式碼：
js-tabs
首页 技术 生活 作品
首页首页首页首页首页首页首页首页首页首页
11111 22222 33333
11111111111111111111111111111111111
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 知識，隨意寫的一些效果。
更多javascript實作tabs選項卡切換效果相關文章請關注PHP中文網！
相關文章：
🎜🎜簡約時尚
