tkm-ymmt
4/6/2015 - 1:12 AM

jqueryを使わないタブ

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);
  }

})();