[JS] Tab 메뉴 만들기(forEach, Id)

// 행동강령
$('#tab_area3 .ethic_accordions>li>a').click(function() {
     // 아코디언 메뉴 (변수명 앞 $ 제이쿼리 객체임을 표현)
    let $li = $(this).parent('li');
    // 펄쳐진 아코디언 메뉴
    let isOpen = $li.hasClass('on');

    // 전체 닫기 (title : 펼치기로 변경하여 , 닫힌 상태)
    $('#tab_area3 .ethic_accordions>li').removeClass('on').find('a').attr("title", "펼치기");

    // 닫힌 메뉴
    if (!isOpen) {
        // 선택한 항목 열기
        $li.addClass('on').find('a').attr("title", "접기");

        // 선택한 버튼 위치로 스크롤 이동
        let headerHeight = $('#site-header').outerHeight(); //사이드 헤더 높이
        let targetTop = $li.offset().top; // 요소의 상단 위치

        //  사이트 헤더 바로 아래 위치, 0.5초 동안
        $('html, body').animate({scrollTop: targetTop - headerHeight}, 500);
    }
});

 

 

 

 

 

// 페이지 로드된 후 javascript 코드실행
document.addEventListener("DOMContentLoaded", function() {
     // 탭 메뉴
    var tabs = document.querySelectorAll('.tab_type4 ul li a');
    // 탭 콘텐츠
    var tabContents = document.querySelectorAll('.inr-c2 > div');

    // tabs 배열의 각 요소에  함수를 한 번씩 실행 (foreach 메서드)
    tabs.forEach(function(tab) {
          // 각 탭 버튼에 클릭 이벤트 리스너 추가
          tab.addEventListener('click', function(event) {
               // 클릭이벤트 기본동작 막기(a 태그 새로고침 되지 않도록)
               event.preventDefault();
     
               // 모든 탭의 활성화 클래스 및 title 속성 제거(클릭된 탭을 제외한 다른 탭을 비활성화)
               tabs.forEach(function(t) {
                    t.parentElement.classList.remove('on');
                    t.removeAttribute('title');  // title 속성 제거
          });
          
            // 클릭된 탭에 활성화 클래스 추가 및 title 속성 설정
            tab.parentElement.classList.add('on');
            tab.setAttribute('title', '선택됨');
          
            // 모든 콘텐츠 숨기기
            tabContents.forEach(function(content) {
                content.style.display = 'none';
            });
          
            // 클릭된 탭에 해당하는 콘텐츠 표시(a href = tab_area_ 값)
            var target = tab.getAttribute('href');
            document.querySelector(target).style.display = 'block';
        });
    });

    // 페이지 로드 시 첫 번째 탭에 title 속성 설정
    var activeTab = document.querySelector('.tab_type4 ul li.on a');
    if (activeTab) {
          // 첫 페이지(.on 클래스) 활성화된 파트 a태그에 선택됨 추가
          activeTab.setAttribute('title', '선택됨');
    }
});