Tab 기능
각각의 버튼을 클릭 시, 해당 하는 컨텐츠가 보여야 한다.
구현
보통 버튼 3개를 한 번에 개발 하려고 해서 어려움을 겪는다.
그러기 때문에 가장 간단하고 쉬운거 하나부터 만드는 습관을 갖자.
버튼[0] 을 누를 경우
- 버튼[0]에 orange 클래스명 부착
- 박스[0]에 클래스명 부착
이렇게 가정하고 코드를 짜면,
이런 결과가 나오게 된다.
그래서 기존에 붙어있던 orange, show 클래스명은 제거해 주어야 한다.
버튼[0]을 누를경우 - 수정
- 버튼[0], 버튼[1], 버튼[2]에 붙어 있던 orange 클래스명 전부 제거하기
- 버튼[0]에 orange 클래스명 부착
- 박스[0], 박스[1], 박스[2] 에 붙어 있던 show 클래스명 전부 제거하기
- 박스[0]에 show 클래스명 부착
jQuery 셀렉터로 여러 요소 찾은 뒤 하나만 고르기
.tab-button 을 가진 요소가 3개나 있다.
그래서 $('.tab-button').on() 으로 이벤트 리스너를 달면 3개 버튼 전부 이벤트리스너를 달게 된다.
$('.tab-button').eq(0).on() 으로 eq() 메서드를 사용하면 x번째 요소에만 이벤트리스너를 달 수 있다.
