// .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");
  });
});
