Javascriptでタブ切り替え効果を実装（拡張版）_JavaScriptスキル

;/title> ;
"text/ css">
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ソリッド#a0b3d6;border-bottom:1pxソリッド#a0b3d6;float:left;}
.tabs- nav .select1 、.tabs-nav .select2、.tabs-nav .select3、.tabs-nav .select4{background:white;border-bottom:1px 単色白;_position:relative;}
.tabs-content{パディング:20px ;ボーダートップ:1px ソリッド #a0b3d6;マージントップ:-1px;}

class=" タブ" id="タブ">

ホームページ >テクノロジー
生活
作品

ホームページホームページホームページホームページホームページホームページホームページホームページ

ライフ ライフ ライフ ライフ ライフ ライフ

"tabs-content">worksworksworksworks

function tabs(id,trigger,autoplay,time){
var tabsWrap = document.getElementById(id);
var tabsBtn = tabsWrap.getElementsByTagName('h2')[0].getElementsByTagName('a');
var tabsContent = getClass('tabs-content',tabsWrap);
var timer = null;
var 現在 = 0;
ショー(0);
for(var i = 0,len = tabsBtn.length; i tabsBtn[i].index = i;
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
show(this.index);
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
show(this.index);
}
}
}
if(autoplay){
autoPlay();
tabsWrap.onmouseover = function(){
clearInterval(timer);
}
tabsWrap.onmouseout = function(){
autoPlay();
}
}
function autoPlay(){
timer = setInterval(function(){
show(current);
current ;
if(current >= tabsBtn .length){
現在 = 0;
}
},time);
}
function show(n){
current = n;
for(var i = 0,len = tabsBtn.length; i < len; i ){
tabsBtn[i].className = '';
tabsContent[i].style.display = 'none';
}
tabsBtn[current].className = 'select' (現在の 1);
tabsContent[current].style.display = 'ブロック';
}
function getClass(classname,obj){
var results = [];
var elems = obj.getElementsByTagName('*');
for(var i = 0; i < elems.length; i ){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] ] = 要素[i];
}
}
結果を返します。
}
}