파라미터값에 따른 tab active 유지하기

우선  php로 파라미터 값에 따라 active 클래스가 추가되도록 html에 설정한다.

<?= (!$tab || $tab=='tab01') ? 'class="active"' : '' ?>
<?= ($tab=='tab02') ? 'class="active"' : '' ?>

 

각 탭이 클릭될때마다 파라미터가 수정/추가되고 reload()되면 끝.

//원하는 a 요소 모두 선택
const tabMenuLinks = document.querySelectorAll(".layout_tab ul li > a");

tabMenuLinks.forEach((link) => {
    link.addEventListener("click", function (event) {
        event.preventDefault(); // 링크의 기본 동작(페이지 이동) 방지
        const linkHref = this.getAttribute("href"); // 클릭한 링크의 href 값을 가져옴
        const currentURL = window.location.href; // 현재 URL 가져오기

        // URL에서 기존 파라미터 가져오기
        const urlSearchParams = new URLSearchParams(window.location.search);
        const params = Object.fromEntries(urlSearchParams.entries());

        // mid(예시) 파라미터가 이미 있는 경우 &형식으로 추가될것이고
        if (currentURL.includes("mid=")) {
            const midParam = currentURL.split("mid=")[1].split("&")[0];
            params.mid = midParam;
            params.tab = linkHref.substring(1);
        } else {
            // mid 파라미터가 없는 경우 &없이 tab형식으로 추가됨
            params.tab = linkHref.substring(1);
        }

        // 새로운 파라미터를 URL에 반영
        const paramString = Object.keys(params).map((key) => `${key}=${params[key]}`).join('&');
        const newURL = currentURL.split('?')[0] + '?' + paramString;

        // URL을 업데이트
        window.history.pushState({}, '', newURL);

        // 페이지를 다시 로드
        window.location.reload();
    });
});