자바스크립트로 탭을 만들때 도와주세요 ㅠ
본문
이번에 새로해보는 탭이 잇는데 js를 잘 못다뤄서 해석도 어렵고 긁어와서 모방해서 짜긴했는데 어디서 문제인지 모르겠네요 ㅜㅜㅜㅜㅜ
탭을 클릭하면 아래 내용이 바뀌어야 하는데 연결이 잘 안되엇는지 내용은 바뀌지 않고 위치만 아래로 내려가네요? 여기에 어떤것을 추가 해야하는지 아니면 js문제인지 봐주실분 ㅠㅠㅠ
공통적인 부분(고정영역) 아래 탭내용쪽만 긁어와 첨부했습니다. 도움 부탁드립니다....ㅠㅠㅠㅠ
답변 2
탭 구현에는 여러가지 방법이 있습니다
방법이란 것은 본인의 능력치에 따라 다르긴 하겠죠
초보의 난이도에서 구현하도록 간단히 설명 드리자면
<div class="tabbtn-wrap">
<a href="javascript:void(0)" class="tabbtn" data-target="tab1">탭1</a>
<a href="javascript:void(0)" class="tabbtn" data-target="tab2">탭2</a>
</div>
<div id="tab1" class="tabs">탭1</div>
<div id="tab2" class="tabs">탭2</div>
이런 구조가 있다는 가정하에 스크립트는
$(function(){
$('.tabbtn').on('click', function(){
let target = $(this).data('target');
$('#'+target).siblings().removeClass('act');
$('#'+target).addClass('act');
})
})
이런식으로 하셔서 act일때만 block 처리하면 될거같은데요?
구조나 css 등은 직접 적용하셔야하고 디버깅 해보지 않아서 대략적인 로직만 설명드렸습니다
오 작동하네요 감사합니다! 그런데 탭이 기능은 잘하는데 아래로 스크롤을 내려 다른 부분을 본 뒤 탭쪽으로 다시 스크롤을 올리는 사이 새로고침이 되어 버리는데 이를 막는 기능이 있을까요?
제가 드린 소스로는 새로고침이 될 조건이 없는데요..?
탭에 act 클래스가 넣어지고 빠지는 과정에서 구조가 번쩍 거리신다면 .tabs들을 div로 묶으셔서 기본 높이값을 주셔도 됩니다.
어디가 오류인지 모를땐
1. 가져온 코드 원본으로 테스트
2. F12 눌러 콘솔탭에서 선행 스크립트 오류가 있는지 채크.
3. 1,2 를 봐도 모를땐 해당 URL 기재.
QNA 게시판은 오류가 어딘지 맞춰야하는 스무고개 하는곳이 아니에요~
답변을 작성하시기 전에 로그인 해주세요.