게시판 리스트에 탭 구현?
본문
게시판 리스트에서 어떤 설명을 보여주고 있는데 여기서 탭 기능을 구현했습니다.
그런데 글이 한개 일때는 문제가 없는데 앞으로 계속 늘어나지 않습니까??
그럼 이 탭이 좀 골때리게 동작을 해요..
<div class="tabs">
<ul>
<li data-tab="tab-1">제품설명</li>
<li data-tab="tab-2">사용조건</li>
</ul>
</div>
<div id="tab-1" class="tab-content current"><?php echo nl2br($list[$i]['wr_2']) ?></div>
<div id="tab-2" class="tab-content"><?php echo nl2br($list[$i]['wr_3']) ?></div>
우선 이렇게 해서 html로 탭을 만들었고
<script>
$(document).ready(function(){
$('.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script>
스크립트 부분입니다.
글이 2개 이상 등록되었을 경우, 1번 탭을 누르면 다 같이 동작을 할 수 밖에 없는 상황입니다.
나름 머리를 써서... 탭에 들어가는 id값을 겹치지 않는 번호은 wr_id 값을 가져와서 적용해봤는데
이러니까 1번글의 1번탭을 선택했을 경우 다른 모든 글도 display:none; 이 되고 있습니다 -_-;;
대략 어떤 방법으로 처리해야는지 감이 안잡히다보니 검색도 못하겠습니다.
도움부탁드립니다.
!-->!-->답변 1
[ 탭 1 ] [ 탭 2 ]
[ 탭 1의 글 display :block ]
< 탭1의 글 내용 wr_2 >
[ 탭 2의 글 display:none ]
< 탭 2의 글 내용 wr_3>
이라는것인데
구조는 1개의 게시물에 해당되는 구조로 만들어두신것 같은데
리스트의 처리를하려고 하시네요
그러면 리스트의 행마다 위 구조가 작동되게 만드시거나
처음부터 리스트의 각 행마다 처리할 구조를 다시 잡고
탭이 작동하게 만들어야 올바르게 작동할것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.