그누보드 QA - tab 메뉴 새로고침 유지 질문드립니다.

tab 메뉴 새로고침 유지 질문드립니다.

mituhashi1218 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.07.11 16:54:22 955 (211.♡.♡.82)

답변 2

본문

<div>

</li>

</li>

</li>

</li>

</div>

</ul>

</li>

</li>

</li>

</li>

$('.tabs li').click(function(){

var data = $(this).attr('data-tab');

$('.tabs-pannel > li').removeClass('active')

$('#'+data).addClass('active');

});

const items = document.querySelectorAll(".tabs li");

items.forEach((item)=>{

item.addEventListener('click',()=>{

items.forEach((e)=>{

e.classList.remove('active');

})

item.classList.add('active');

})

</script>

현재 이런 구조로 탭 메뉴를 사용중입니다! 그런데 메뉴에 id 값을 줘도 새로고침시 첫번째 페이지로 돌아가는데 방법이 있을까요?

#그누보드5 #탭메뉴

답변 2

wodud3073 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-07-11 17:08:32 115.♡.♡.214


<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
 
<style>
.tabs li.active{border: 1px solid red;}
.tabs-pannel li{display: none;}
.tabs-pannel li.active{display: block;}
</style>
<ul class="tabs">
    <li class="active">
        <a href="#pannel-1">1</a>
    </li>
    <li class="">
        <a href="#pannel-2">2</a>
    </li>
    <li class="">
        <a href="#pannel-3">3</a>
    </li>
    <li class="">
        <a href="#pannel-4">4</a>
    </li>
</ul>
 
<ul class="tabs-pannel">
    <li class="active" id="pannel-1">내용1</li>
    <li id="pannel-2">내용2</li>
    <li id="pannel-3">내용3</li>
    <li id="pannel-4">내용4</li>
</ul>
 
<script>
// 탭변경
$('.tabs li').click(function(){
    var eq = $(this).index();
    $('.tabs li').removeClass('active').eq(eq).addClass('active');
    $('.tabs-pannel li').removeClass('active').eq(eq).addClass('active');
});
 
// 새로고침 유지
var eq = window.location.href.split('-').pop();
if( eq > 0 ){
    eq--;
    $('.tabs li').eq(eq).click();
}
</script>