22 lines
1.1 KiB
JavaScript
22 lines
1.1 KiB
JavaScript
// .tab-container라는 클래스를 가진 각 요소에 대해 함수를 실행합니다.
|
|
$(".tab-container").each(function() {
|
|
|
|
// 현재 .tab-container 요소 내의 .tab-menu li 요소에 대해 클릭 이벤트 핸들러를 설정합니다.
|
|
$(".tab-menu li", this).on("click", function(e) {
|
|
|
|
// 클릭 이벤트의 기본 동작(링크로 이동하는 것 등)을 막습니다.
|
|
e.preventDefault();
|
|
|
|
// 클릭된 li 요소의 id 속성값에 "-container"를 붙여서 idName 변수에 저장합니다.
|
|
// 예: id가 "tab1"이라면 idName은 "tab1-container"가 됩니다.
|
|
const idName = $(this).attr("id") + "-container";
|
|
|
|
// 클릭된 li 요소에 "on" 클래스를 추가하고, 그 형제 요소들에서 "on" 클래스를 제거합니다.
|
|
$(this).addClass("on").siblings().removeClass("on");
|
|
|
|
// id가 idName과 일치하는 요소에 "on" 클래스를 추가하고, 그 형제 요소들에서 "on" 클래스를 제거합니다.
|
|
// 이렇게 하면 해당 콘텐츠가 표시되고 다른 콘텐츠는 숨겨집니다.
|
|
$("#" + idName).addClass("on").siblings().removeClass("on");
|
|
});
|
|
});
|