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개
</p>
<p><script src="<a href="https://code.jquery.com/jquery-1.12.4.min.js"" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.12.4.min.js"</a> integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script></p>
<p> </p>
<p><style></p>
<p>.tabs li.active{border: 1px solid red;}</p>
<p>.tabs-pannel li{display: none;}</p>
<p>.tabs-pannel li.active{display: block;}</p>
<p></style></p>
<p><ul class="tabs"></p>
<p> <li class="active"></p>
<p> <a href="#pannel-1">1</a></p>
<p> </li></p>
<p> <li class=""></p>
<p> <a href="#pannel-2">2</a></p>
<p> </li></p>
<p> <li class=""></p>
<p> <a href="#pannel-3">3</a></p>
<p> </li></p>
<p> <li class=""></p>
<p> <a href="#pannel-4">4</a></p>
<p> </li></p>
<p></ul></p>
<p> </p>
<p><ul class="tabs-pannel"></p>
<p> <li class="active" id="pannel-1">내용1</li></p>
<p> <li id="pannel-2">내용2</li></p>
<p> <li id="pannel-3">내용3</li></p>
<p> <li id="pannel-4">내용4</li></p>
<p></ul></p>
<p> </p>
<p><script></p>
<p>// 탭변경</p>
<p>$('.tabs li').click(function(){</p>
<p> var eq = $(this).index();</p>
<p> $('.tabs li').removeClass('active').eq(eq).addClass('active');</p>
<p> $('.tabs-pannel li').removeClass('active').eq(eq).addClass('active');</p>
<p>});</p>
<p> </p>
<p>// 새로고침 유지</p>
<p>var eq = window.location.href.split('-').pop();</p>
<p>if( eq > 0 ){</p>
<p> eq--;</p>
<p> $('.tabs li').eq(eq).click();</p>
<p>}</p>
<p></script></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
원래 새로고침시 javascript로는 유지하기 안됩니다.
자바스크립트는 후순위 이기때문에 html 보다 늦게 실행됩니다. 서버언어로 실행하셔야되는데 js로 하실거면 #같은 해시태그를 가져와서 아이디가 같다면 active 걸어야될거 같습니다. 예시코드 작성해드리겠습니다.
답변에 대한 댓글 4개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인