jqueryを使わないタブ
(function(){
var tabBtn = '';
var tabContents = '';
var tabChildren = '';
var tabBtnChildren = '';
/**
* tab の初期化。
*/
function tabInit(){
tabBtn = document.getElementById('js-tab_btn');
tabContents = document.getElementById('js-in_tab');
tabChildren = tabContents.getElementsByTagName('div');
tabBtnChildren = tabBtn.getElementsByTagName('li');
var lis = tabBtn.getElementsByTagName('li');
if(isIE()){
for(var i = 0, l = lis.length; i < l; i++){
lis[i].attachEvent('onclick', tabBtnsClickHandler, false);
}
} else {
for(var i = 0, l = lis.length; i < l; i++){
lis[i].addEventListener('click', tabBtnsClickHandler, false);
}
}
}
/**
* tabBtn クリックハンドラ
* @param e event
*/
function tabBtnsClickHandler(e){
var e = e || window.event;
var index = getIndex(e, tabBtn.getElementsByTagName('li'));
for(var i = 0, l = tabChildren.length; i < l; i++){
removeClass(tabChildren[i], 'active');
removeClass(tabBtnChildren[i], 'active');
}
addClass(tabBtnChildren[index], 'active');
addClass(tabChildren[index], 'active');
}
/**
* ボタンのindexを取得する関数
* @param e event
* @param eles elementの配列
* @returns {Number|*} index番号
*/
function getIndex(e, eles){
var el = e.currentTarget || window.event.srcElement;
if(isIE()){
var length = i = tabBtnChildren.length;
} else {
var length = i = e.target.parentNode.parentElement.childElementCount;
}
while(i--){
if(eles[i] == el){
return i;
}
}
}
/**
* クラスを削除する関数
* @param ele element
* @param className 削除したいクラス名
*/
function removeClass(ele, className){
var currentClass = ele.className;
var classRegExp = new RegExp(className);
if(currentClass){
if(classRegExp.test(currentClass)){
ele.className = currentClass.replace(classRegExp, '');
}
}
}
/**
* クラスを追加する関数
* @param ele element
* @param className 追加したいクラス名
*/
function addClass(ele, className){
if(ele.className) {
var currentClass = ele.className;
var classRegExp = new RegExp(className);
}
if(!classRegExp || !classRegExp.test(currentClass)){
ele.className = currentClass + ' ' + className;
}
}
/**
* IEを判定する関数
* @returns {boolean}
*/
function isIE(){
if(/(MSIE|trident)/.test(navigator.userAgent))
return true;
}
if(isIE()){
window.attachEvent('onload', tabInit, false);
} else {
window.addEventListener('load', tabInit, false);
}
})();