tab 메뉴 새로고침 유지 질문드립니다.
본문
<ul class="tabs">
<div>
<li class="active" data-tab="pannel-1">
<a href="#pannel-1"></a>
</li>
<li class="" data-tab="pannel-2">
<a href="#pannel-2"></a>
</li>
<li class="" data-tab="pannel-3">
<a href="#pannel-3"></a>
</li>
<li class="" data-tab="pannel-4">
<a href="#pannel-4"></a>
</li>
</div>
</ul>
<ul class="tabs-pannel">
<li class="active" id="pannel-1">
</li>
<li id="pannel-2">
</li>
<li id="pannel-3">
</li>
<li id="pannel-4">
</li>
<script>
$('.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 값을 줘도 새로고침시 첫번째 페이지로 돌아가는데 방법이 있을까요?
답변 2
<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>
적용하니까 바로 작동되네요 ! 정말 감사합니다!!!
원래 새로고침시 javascript로는 유지하기 안됩니다.
자바스크립트는 후순위 이기때문에 html 보다 늦게 실행됩니다. 서버언어로 실행하셔야되는데 js로 하실거면 #같은 해시태그를 가져와서 아이디가 같다면 active 걸어야될거 같습니다. 예시코드 작성해드리겠습니다.
빠른답변 감사합니다!
어렵게 작성하신거같은데 탭메뉴 생각보다 쉽습니다. 스크립트 jquery 쓰시는거같은데 변경해드리겠습니다.
코드 여기에 작성해주시나요?!
위에 작성했습니다. index or eq라는 개념쓰시면 아이디 구지안쓰셔도 됩니다. 확인해보세요.
