フリーランスの忘備録

/*
+-----------------+
| VARIABLE        |
+-----------------+
*/
const tablistId = "tab";             //タブリストのID
const tabClass = "tab-item";         //タブのCLASS
const tabCurrentClass = "current";   //タブのカレントCLASS
const tabUrlparam = "tab";           //タブのURLパラメータ

/*
+-----------------+
| FUNCTION        |
+-----------------+
*/
const tablistEle = document.getElementById(tablistId);
const tabbtnEles = document.getElementsByClassName(tabClass);

const tabSwiper = new Swiper('.swiper-container',{
  autoHeight:true,
  allowTouchMove:false,
  effect:"fade",
  fadeEffect: {
    crossFade: true
  }
});

//「tabItemclass」要素をクリックしたときに実行
for( let i = 0 ; i < tabbtnEles.length ; i++ ){
  tabbtnEles[i].addEventListener("click",()=>{
    const num = tabbtnEles[i].dataset.index;
    const currentItem = tablistEle.getElementsByClassName(tabCurrentClass)[0];
    currentItem.classList.remove(tabCurrentClass);
    tabSwiper.slideTo(num);
    tabbtnEles[i].classList.add(tabCurrentClass);
  });
}

// URLパラメータ取得の関数 getParam
const getParam = (name, url) =>{
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
  results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// Load時に最初に表示するタブの関数 initTab
const initTab = () =>{
  const number = Number(getParam(tabUrlparam));
  if( number != null && !(isNaN(number)) && 0 <= number && number < tabbtnEles.length){
    tabSwiper.slideTo(number,0);
    tabbtnEles[number].classList.add(tabCurrentClass);
  }else{
    tabbtnEles[0].classList.add(tabCurrentClass);
  }
}

initTab();