자바스크립트로 탭을 만들때 도와주세요 ㅠ 채택완료
넘어렵
1년 전
조회 5,665
이번에 새로해보는 탭이 잇는데 js를 잘 못다뤄서 해석도 어렵고 긁어와서 모방해서 짜긴했는데 어디서 문제인지 모르겠네요 ㅜㅜㅜㅜㅜ
탭을 클릭하면 아래 내용이 바뀌어야 하는데 연결이 잘 안되엇는지 내용은 바뀌지 않고 위치만 아래로 내려가네요? 여기에 어떤것을 추가 해야하는지 아니면 js문제인지 봐주실분 ㅠㅠㅠ
공통적인 부분(고정영역) 아래 탭내용쪽만 긁어와 첨부했습니다. 도움 부탁드립니다....ㅠㅠㅠㅠ
http://sir.kr/data/editor/2401/2039295912_1705541149.4836.png" />
http://sir.kr/data/editor/2401/2039295912_1705541152.4656.png" />
http://sir.kr/data/editor/2401/2039295912_1705541155.8832.png" width="100%" />
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
1년 전
탭 구현에는 여러가지 방법이 있습니다
방법이란 것은 본인의 능력치에 따라 다르긴 하겠죠
초보의 난이도에서 구현하도록 간단히 설명 드리자면
</p>
<p><div class="tabbtn-wrap"></p>
<p> <a href="javascript:void(0)" class="tabbtn" data-target="tab1">탭1</a></p>
<p> <a href="javascript:void(0)" class="tabbtn" data-target="tab2">탭2</a></p>
<p></div></p>
<p><div id="tab1" class="tabs">탭1</div></p>
<p><div id="tab2" class="tabs">탭2</div></p>
<p>
이런 구조가 있다는 가정하에 스크립트는
</p>
<p>$(function(){</p>
<p> $('.tabbtn').on('click', function(){</p>
<p> let target = $(this).data('target');</p>
<p> $('#'+target).siblings().removeClass('act');</p>
<p> $('#'+target).addClass('act');</p>
<p> })</p>
<p>})</p>
<p>
이런식으로 하셔서 act일때만 block 처리하면 될거같은데요?
구조나 css 등은 직접 적용하셔야하고 디버깅 해보지 않아서 대략적인 로직만 설명드렸습니다
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
넘어렵
1년 전
오 작동하네요 감사합니다! 그런데 탭이 기능은 잘하는데 아래로 스크롤을 내려 다른 부분을 본 뒤 탭쪽으로 다시 스크롤을 올리는 사이 새로고침이 되어 버리는데 이를 막는 기능이 있을까요?
�
이글로
1년 전
제가 드린 소스로는 새로고침이 될 조건이 없는데요..?
탭에 act 클래스가 넣어지고 빠지는 과정에서 구조가 번쩍 거리신다면 .tabs들을 div로 묶으셔서 기본 높이값을 주셔도 됩니다.
탭에 act 클래스가 넣어지고 빠지는 과정에서 구조가 번쩍 거리신다면 .tabs들을 div로 묶으셔서 기본 높이값을 주셔도 됩니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인