앞서 간단한 CSS작업을 통한 탭메뉴 생성을 한 바 있다.
<css> 탭메뉴만들기(input태그/label태그의 활용)
input태그는 사용자에게서 데이터를 받기 위해 사용되는 주태그이다. 이에 따라 다양한 속성을 가지고 있어서 상황에 맞게 사용할 필요가 있다. label태그는 input에 이름을 붙여주는 태그라고 생각
seon-xero.tistory.com
오늘은 jquery와 javascript를 활용한 탭메뉴 생성을 하려고 한다.
나의 경우 클래스추가 및 제어를 통해 탭메뉴가 이어지게 할 예정이지만 이 방법이 절대적인 것은 아니다.
제이쿼리와 자바스크립트에서의 클래스제어는 차이가 있다.
이전에 자바스크립트 관련 클래스추가 및 제어 관련 글은 작성한 적(하단에 참조로 남겨놓겠음)이 있으니 헷갈릴 경우 참고하면 좋을 것 같다.
- 제이쿼리, 자바스크립트 HTML.CSS 동일하게 적용
- Script부분의 차이(선택객체나 명령 등)
: 버튼메뉴 클릭 시 버튼에 해당하는 콘텐츠 내용이 보이도록 함
1.제이쿼리에서의 클래스추가 및 제거
- 클래스 추가 : 선택자. addClass(클래스명)
- 클래스 제거 : 선택자. removeClass(클래스명)
✅ 클래스 관련 명령에서 클래스명에 .을 작성하지 않도록 주의!
2. 자바스크립트에서의 클래스추가 및 제거
- 클래스 추가 : 선택자.classList.add('클래스명')
- 클래스 제거 : 선택자.classList.remove('클래스명')
- 클래스 유무 확인 : 선택자.classList.contains('확인할클래스명') ▶ true, false값으로 확인
✅ 클래스 관련 명령에서 클래스명에 .을 작성하지 않도록 주의!
<javascript> 객체요소의 우선순위 설정
객체요소의 우선순위 설정을 위해선 보통 아래와 같이 활용하게 된다. 1. 객체요소의 우선순위 설정 부모객체>자식객체 부모객체 자손객체(기호>대신 띄어쓰기로 구분) 선택객체선택객체의선택
seon-xero.tistory.com
사실 CSS 통한 탭메뉴 작성글과 더불어 이번 작성한 글에서도
선택한 탭메뉴에 해당하는 콘텐츠 내용만 보이게 했지만, 실제로는 탭메뉴의 하이라이트(활성화 표시)를 통해 현재 선택된 메뉴가 무엇인지도 알려줄 필요가 있다.
(실제로 jquery코드 내에는 but 내 클래스추가를 통해 활성화표시를 간단히 해봤다)
(사담 : 티스토리를 하고 나서 코딩이 더 재밌다😉)
'javascript&jquery' 카테고리의 다른 글
| <Jquery> attr 속성 <javascript> setAttribute 속성 (1) | 2024.04.11 |
|---|
