jQuery를 사용하여 탭 기능을 구현

jQuery 사용하여 탭 기능을 구현하는 스크립트.

전체 코드

const tabButn = $(".title ul li");
        const tabCont = $(".cont > div");

        tabCont.hide().eq(0).show();

        tabButn.click(function (e) {
            e.preventDefault

            const index = $(this).index();

            $(this).addClass("active").siblings().removeClass("active")
            tabCont.eq(index).show().siblings().hide()
        })

전체적인 구조

• 사용자가 탭 버튼 중 하나를 클릭하면, 해당 탭에 맞는 내용이 보이고 나머지 탭 내용은 숨겨지는 기능을 수행합니다. 사용자가 탭 버튼을 클릭하면, 해당 버튼에 active 클래스가 추가되고, 나머지 버튼에서는 제거됩니다. 동시에 해당 탭 버튼에 매칭되는 내용만 보이고, 나머지 탭 내용은 숨겨집니다.
  

---

코드 분석

jQuery 선택자를 사용

let currentIndex = 0;

• 이 줄은 jQuery 선택자를 사용하여 HTML 문서 내에서 클래스 이름이 title 인 요소 내의 ul 요소의 모든 li 요소를 선택합니다. 이들은 탭 버튼으로 사용됩니다. tabButn 변수에 이 요소들의 참조가 저장됩니다.
  

클래스 이름이 cont인 요소의 직계 자식인 모든 div 요소를 선택

const tabCont = $(".cont > div");

• 이들은 각 탭 버튼에 해당하는 내용을 담고 있습니다. tabCont 변수에 이 요소들의 참조가 저장됩니다.
  

메소드들의 역활

tabCont.hide().eq(0).show();

• hide() 메소드를 사용하여 모든 탭 내용을 숨깁니다.
  

• eq(0) 메소드는 선택된 요소들 중 첫 번째 요소 (인덱스 0)를 선택합니다. 즉, 첫 번째 탭 내용을 선택합니다.
  

• show() 메소드를 사용하여 첫 번째 탭 내용만 보이게 합니다.
  

클릭 이벤트 리스너를 추가

tabButn.click(function (e) {
    e.preventDefault})

• click() 메소드를 사용하여 tabButn (탭 버튼)에 클릭 이벤트 리스너를 추가합니다. 버튼을 클릭하면 익명 함수가 실행됩니다.
  

• e.preventDefault 는 이벤트의 기본 동작을 취소합니다. 여기서는 a 태그의 기본 동작인 페이지 이동을 막기 위해 사용됩니다. 하지만, e.preventDefault 뒤에 괄호 ()를 붙여야 올바르게 작동합니다.
  

탭 버튼의 인덱스를 반환

const index = $(this).index();

• $(this).index() 는 현재 클릭된 탭 버튼의 인덱스를 반환합니다. 이 인덱스는 tabCont에서 해당 내용을 선택하는 데 사용됩니다.
  

메소드를 사용하여 현재 클릭된 탭 버튼의 클래스 변경

$(this).addClass("active").siblings().removeClass("active")

• addClass(“active”) 메소드를 사용하여 현재 클릭된 탭 버튼에 active 클래스를 추가합니다. 이를 통해 활성화된 탭 버튼을 시각적으로 구분할 수 있습니다.
  

• siblings().removeClass(“active”) 는 현재 탭 버튼을 제외한 모든 형제 탭 버튼에서 active 클래스를 제거합니다.
  

메소드를 사용하여 탭 내용 숨기고 나타내기.

tabCont.eq(index).show().siblings().hide()

• eq(index) 메소드를 사용하여 index 에 해당하는 탭 내용을 선택합니다.
  

• show() 메소드를 사용하여 해당 탭 내용을 보이게 합니다.
  

• siblings().hide() 메소드를 사용하여 선택된 탭 내용을 제외한 모든 형제 탭 내용을 숨깁니다.
  

메소드를 사용해여

let nextIndex = (currentIndex + 1) % 3

• nextIndex 는 다음에 보여줄 이미지의 인덱스를 계산합니다. (currentIndex + 1) % 3 연산을 통해, 인덱스가 0, 1, 2 순으로 순환 하게 됩니다. % 3은 인덱스가 2를 초과하지 않도록 합니다 (이미지가 총 3개라고 가정).
  

현재 이미지 숨기기

$(".slider").eq(currentIndex).fadeOut(1000)

• $(“.slider”).eq(currentIndex) 는 클래스 이름이 slider 인 요소 중에서 currentIndex 에 해당하는 요소를 선택합니다. .fadeOut(1000) 메서드는 해당 요소를 1초 동안 서서히 숨깁니다.
  

다음 이미지 보이기

$(".slider").eq(nextIndex).fadeIn(1000)

• $(“.slider”).eq(nextIndex) 는 다음에 보여줄 이미지를 선택합니다. .fadeIn(1000) 메서드는 해당 요소를 1초 동안 서서히 나타나게 합니다.
  

인덱스 업데이트

currentIndex = nextIndex

• currentIndex 변수를 nextIndex 로 업데이트하여, 다음 반복 때 현재 이미지로 사용됩니다.
  

setInterval 및 준비 핸들러 닫기

setInterval(() => {}, 1000)

• setInterval 의 두 번째 인자로 1000을 전달하여, 반복적인 함수 호출 간격을 1초로 설정합니다. 그리고 jQuery의 준비 핸들러를 닫습니다.