[CI4] 부트스트랩 5 NAV and Tabs Remember Tab.

	let tabEl = $('#tabs').children();
    let dataStore = window.sessionStorage;
    if(dataStore.getItem('1-tabs')) {
        let selected = JSON.parse(dataStore.getItem('1-tabs'));
        $(tabEl).each((el) => {
            let elId = $(tabEl[el]).attr("id");
            if(elId !== selected.selectId) {
                $(tabEl[el]).attr('aria-selected', false);
                $(tabEl[el]).removeClass('active');
                let showTab = $(tabEl[el]).attr('data-bs-target');
                $(showTab).removeClass('active');
                $(showTab).removeClass('show');
            } else {
                $('#'+selected.selectId).addClass('active');
                $('#'+selected.selectId).attr('aria-selected', true);
                $(selected.selectTab).addClass('active');
                $(selected.selectTab).addClass('show');
            }
        });
    }
    
    // 위가 기억하는 부분.
    // 아래가 해당 태그 클릭시 세션값을 저장하는 부분
    
    $(tabEl).each((el) => {
        $(tabEl[el]).click(function (e) {
            let selectId = $(e.target).attr('id');
            let selectTab = $(e.target).attr('data-bs-target');

            let obj = { selectId, selectTab };
            //  Set future value
            try {
                dataStore.setItem( '1-tabs', JSON.stringify(obj));
                dataStore.setItem( '1-tabs', JSON.stringify(obj));
            } catch(e) {}

        });
    });

위 구조는 탭을 호출해서 해당 tab을 작동되도록 하게 구성한것이다.

<div id="tabs" class="nav flex-column nav-pills pt-4 mt-5 pe-3 me-3" role="tablist" aria-orientation="vertical">
    <?php if(isset($_GET['id'])) {  ?>
        <a href="/nlist" class="text-dark nav-link bg-black active" id="1-tab">
            1
        </a>
    <?php } else { ?>
        <a <?php if(isset($_GET['id'])) { echo 'href="/링크"'; }?> class="text-dark nav-link bg-black active" id="1-tab" data-bs-toggle="pill" data-bs-target="#1-content-tab" type="button" role="tab" aria-controls="notice-content-tab" aria-selected="true">
           1
        </a>
    <?php } ?>
    <a class="text-dark nav-link bg-black" id="2-tab" data-bs-toggle="pill" data-bs-target="#2-content-tab" type="button" role="tab" aria-controls="2-content-tab" aria-selected="false">
        2
    </a>
    <a class="text-dark nav-link bg-black" id="3-list-tab" data-bs-toggle="pill" data-bs-target="#3-li-content-tab" type="button" role="tab" aria-controls="3-content-tab" aria-selected="false">
        3
    </a>
</div>
<div class="tab-content">
    <div class="tab-pane fade show active" id="1-content-tab" role="tabpanel" aria-labelledby="1-tab">
    </div>
    <div class="tab-pane fade show active" id="2-content-tab" role="tabpanel" aria-labelledby="2-content-tab">
    </div>
    <div class="tab-pane fade show active" id="3-content-tab" role="tabpanel" aria-labelledby="3-li-content-tab">
    </div>
</div>

id값이 시작되는 부분의 숫자는 코딩 규칙상 작동되지 않는다. 꼭 수정하길 바란다.

코드를 다르게 표기하기위해서 그냥 숫자로 표시.