tab 클릭 시 css 변경

탭 메뉴나 페이지 번호 등을 클릭했을 때 클릭한 요소만 css를 변경(.active 추가)하는 js

 

HTML 

<div id="container">
  <span class="tab active">1</span>
  <span class="tab">2</span>
  <span class="tab">3</span>
  <span class="tab">4</span>
  <span class="tab">5</span>
</div>

css 

#container > .tab {color:#333;}
#container > .tab.active {color:#fff; background:#333; border-radius:50%;}

JS 

const tabContainer = document.getElementById("container");
let tab = tabContainer.getElementsByClassName("tab");
for(let i = 0; i < tab.length; i++){
  let current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
}

 

 

참고사이트

https://www.w3schools.com/howto/howto_js_tabs.asp