[JavaScript] forEach 활용 탭 메뉴 (Tabs) 구성

자바스크립트의 forEach를 활용하여 탭 메뉴 구성하기

[html]

<ul class="tab-menu">

  <li class="tab active"><a href="#">tab1</a>

    <div class="content active">tab1 content</div>

  </li>

  <li class="tab"><a href="#">tab2</a>

    <div class="content">tab2 content</div>

  </li>

  <li class="tab"><a href="#">tab3</a>

    <div class="content">tab3 content</div>

  </li>

</ul>

 

[css]

ul { position: relative; padding: 0; }

li { list-style: none; }

a{ color: inherit; text-decoration: none; }

.tab-menu {

  display: flex; justify-content: space-between;

  width: 200px;

}

.tab.active {

  color: red;

  text-decoration: underline;

}

.content {

  display: none;

  position: absolute; left: 0; top: 30px;

  width: 100%; height: 50px;

  background: skyblue; color: #fff;

}

.content.active {

  display: block;

}

 

[js]

let tab = document.querySelectorAll('.tab');

let content = document.querySelectorAll('.content');

tab.forEach((item,idx) =>{

  // 변수 tab의 "모든" 값과 인덱스를 변수 item과 idx에 불러오기

  // console.log(item);

  // console.log(idx);

  item.addEventListener('click',function(e){

    // 불러온 값 클릭 시 실행 함수

    // 중요 - 변수 item과 idx에 "클릭된" 값과 인덱스로 재할당

    // console.log(tab);

    // console.log(idx);

    e.preventDefault();

    tab.forEach((i) =>{

    // 변수 tab의 모든 값을 변수 i에 불러오기

      i.classList.remove('active')

      // 모든 값에 클래스 제거

    });

    content.forEach((j) =>{

    // 변수 content의 모든 값을 변수 j에 불러오기

      j.classList.remove('active')

      // 모든 값에 클래스 제거

    });

    tab[idx].classList.add('active');

    // 변수 tab의 "클릭된" 인덱스 idx에 클래스 추가

    content[idx].classList.add('active');

    // 변수 content의 "클릭된" 인덱스 idx에 클래스 추가

  }); // function

}); // forEach

 

See the Pen [javascript] forEach tab menu _ forEach 활용 탭 메뉴 by Jinsik Son (@Jinsik-Son) on CodePen.