1번 탭이 기본이고, 1번 탭일때는 2,3번이 display:none
2번 탭일땐 1,3번이 display:none
3번 탭일땐 1,2번이 display:none 입니다.
아래와 같이 #링크를 주면 한 페이지에서 스크롤 상하로는 이동이 가능한데 각 탭 메뉴로 이동되게 하고 싶습니다.
주소창에서 sir.kr/#tab-1으로 들어가면 특별함이 나오고
sir.kr/#tab-2으로 들어가면 혜택이
sir.kr/#tab-3으로 들어가면 오시는 길이 나오게 하려면
탭 내용을 따로 빼서 연결하는 방법 밖에 없을까요?

.tab-content{ display: none; } .tab-content.current{ display: inherit; }
$(document).ready(function(){
$(".tab_menu ul li a").click(function(){ $(this).css({"border-bottom":"3px solid #000"}).parent('li').siblings('li').children('a').css({"border-bottom":"3px solid #dfdfdf"});
$('.tab_menu ul li').click(function(){ var tab_id = $(this).attr('data-tab');
$('.tab_menu ul li').removeClass('current'); $('.tab-content').removeClass('current');
$(this).addClass('current'); $("#"+tab_id).addClass('current'); })
})
location.hash 이 값을 활요하면 됩니다.
크롬이나 파이이폭스에서 F12눌러 콘솔 확인해보세요.
</strong></p>
<p>console.log(<span style="color:#e74c3c;">location.hash</span>);
$('.tab_menu ul li').removeClass('current');
$('.tab-content').removeClass('current');
$(<span style="color:#e74c3c;">location.hash</span>).addClass('current');</p>
<p><strong>
댓글을 작성하려면 로그인이 필요합니다.
반응형의 가벼운 제이쿼리 플러그인 소개 시켜 드려 볼게요
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인