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

mituhashi1218

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-07-11 (화) 16:54:22 2,323

<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개 / 댓글 5개

채택된 답변

+20 포인트

킹콩랩스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-07-11 (화) 17:08:32

Copy

<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>