[javascript] 페이지 이동 가능한 tabmenu 만들기 URL get query string

1. 작업내용

• 이벤트 페이지 내 (진행/종료) 카테고리 분류 탭메뉴 추가
• 카테고리 분류 시 탭메뉴 클릭시 해당 카테고리로 페이지 이동 필요
• 탭메뉴클릭 -> 페이지 이동 후에도 해당 메뉴 on 유지되어야함

<ul class="event-category">
    <li class="event-on on">
        <a href="/board/gallery/list.html?board_no=8&category_no=1">진행중인 이벤트</a>
    </li>
    <li class="event-end">
        <a href="/board/gallery/list.html?board_no=8&category_no=2">종료된 이벤트</a>
    </li>
</ul>

html 구조이며 링크가 연결된 탭메뉴이기에 메뉴 클릭 시 페이지가 이동되며 기존 탭메뉴 스크립트 기능이 적용되지 않는 이슈 발생

2. 탭메뉴를 현재 url로 구분하여 class="on" 추가되도록 작업

진행중인 이벤트 url - /board/gallery/list.html?board_no=8&category_no=1
종료된 이벤트 url - /board/gallery/list.html?board_no=8&category_no=2

<script>
    
    eventCategory();

    //이벤트 탭 분류
    function eventCategory() {
        const onBtn = $(".xans-board-listpackage .event-category li.event-on")
        const endBtn = $(".xans-board-listpackage .event-category li.event-end") 
        
        const queryString = window.location.search; // 현재 url 쿼리스트링 확인
        const urlParams = new URLSearchParams(queryString); // 쿼리스트링 가져와서 urlParams으로 생성

        const categoryNo = urlParams.get('category_no') // urlParams 에서 category_no 키값 가져오기

        if(categoryNo === "1"){ //category_no 값이 1일 경우
            if(onBtn){
                onBtn.addClass('on')
                endBtn.removeClass('on')
            }
        }else if(categoryNo === "2"){ //category_no 값이 2일 경우
            if(onBtn){
                onBtn.removeClass('on')
                endBtn.addClass('on')
            }
        }
    }
</script>코드를 입력하세요

* 페이지네이션 이동시 url이 변경되어도 category_no의 키값 동일할 경우 문제 없이 작동됨

ex) /board/gallery/list.html?board_no=8&category_no=2&cate_no=2&page=3&category_no=2

[URL 조작방법 참고] - (https://developer-talk.tistory.com/822)