JS - 이중 탭 구현
- 제이쿼리 없이 순수 바닐라 자바스크립트로 구현 해보고자 연습삼아 작성
- 코드가 깔끔하지도, 잘못 됐을 수도 있고, 정답이 아닐 수도 있음(함수명, 변수명은 대충 지정..)
1. HTML
- 메뉴를 크게 나눌 수 있는 탭과 몇 주차 별로 나눌 수 있는 탭
- 둘의 차이점은 탭 메뉴와 컨텐츠 내부 위치 유무 차이
2. Javascript
1) 메뉴와 컨텐츠가 내부에 같이 있을 경우 - 소메뉴 탭
- 변수 List만큼 주차 별 탭을 클릭하면 이벤트 발생하는 함수
- 주차 별 리스트(li)들을 모두 가져오기 때문에 어느 대메뉴 속 몇 주차 탭인지 확인이 필요
- if문을 사용해서 t라는 변수에 어느 대메뉴를 담을 지 지정
2) 탭 메뉴와 컨텐츠가 내부에 같이 없을 경우
- 대메뉴 탭을 클릭하면 이벤트 발생하는 함수
- 클릭한 메뉴의 이전 형제요소가 null 값이 아니면 탭의 기능을 off, 대메뉴에 맞는 컨텐츠에 클래스 on을 넣어 보이게 지정
Hello World!