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

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

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

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

2023.07.11 16:54:22 975 (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>