본문 바로가기

CSS

특정이름 클래스 객체정보 가져오기, 클래스 포함여부 확인 ,클래스 추가 제거

728x90
반응형

예)

<script>


function setActiveTab(clickedButton) {
  const tabButtons = document.querySelectorAll('.tab-button');
  const hasClass = clickedButton.classList.contains('VV-tab-button');
 
  tabButtons.forEach(button => {
    button.classList.remove('active');  // active 클래스 제거
    button.style.backgroundColor = 'white';  //배경색 변경
    button.style.color = 'black';         //글자색 변경
  });
  clickedButton.classList.add('active');  // active 클래스 추가
   if (hasClass) {
    clickedButton.style.backgroundColor = '#FF6700'; // 주황색
  } else {
    clickedButton.style.backgroundColor = '#007bff'; // 파란색
  }
 clickedButton.style.color = 'white';  //글자색 변경
  //
 
}
</script>

728x90
반응형