2026, 새로운 도약을 시작합니다.

탭메뉴 반복 채택완료

고수님들의 고견이 필요합니다^%^

아래처럼 class를 사용할 경우 script를 반복해서 하지않고, 한번만 사용하고 싶은데, 어떻게 해야 될까요?

------------------------------------------

  <div class="tab_menu_container">
    <button class="tab_menu_btn 1 on" type="button">전체대상</button>
    <button class="tab_menu_btn 1" type="button">문자참여자</button>
  </div> 
  <div class="tab_menu_container">
    <button class="tab_menu_btn 2 on" type="button">일반</button>
    <button class="tab_menu_btn 2" type="button">1차</button>
    <button class="tab_menu_btn 2" type="button">2차</button>
    <button class="tab_menu_btn 2" type="button">3차</button>
  </div>
  <div class="tab_menu_container">
    <button class="tab_menu_btn 3 on" type="button">중복불가</button>
    <button class="tab_menu_btn 3" type="button">중복가능</button>
  </div>
  <div class="tab_menu_container">
    <button class="tab_menu_btn 4 on" type="button">1</button>
    <button class="tab_menu_btn 4" type="button">2</button>
    <button class="tab_menu_btn 4" type="button">3</button>
    <button class="tab_menu_btn 4" type="button">4</button>
    <button class="tab_menu_btn 4" type="button">5</button>
    <button class="tab_menu_btn 4" type="button">6</button>
    <button class="tab_menu_btn 4" type="button">7</button>
    <button class="tab_menu_btn 4" type="button">8</button>
    <button class="tab_menu_btn 4" type="button">9</button>
    <button class="tab_menu_btn 4" type="button">10</button>
  </div>

<script>
$('.tab_menu_btn').on('click',function(){
  $('.tab_menu_btn').removeClass('on');
  $(this).addClass('on')
});

</script>

답변 1개

채택된 답변
+20 포인트

https://ungdoli0916.tistory.com/799

input의 radio 와  label을 이용하여 css를 적용하시면 중복 클릭을 막으실 수 있습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고