게시판 리스트에 탭 구현?

게시판 리스트에 탭 구현?

QA

게시판 리스트에 탭 구현?

본문

게시판 리스트에서 어떤 설명을 보여주고 있는데 여기서 탭 기능을 구현했습니다.

 

그런데 글이 한개 일때는 문제가 없는데 앞으로 계속 늘어나지 않습니까??

 

그럼 이 탭이 좀 골때리게 동작을 해요..

 


<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개의 게시물에 해당되는 구조로 만들어두신것 같은데

 

리스트의 처리를하려고 하시네요

 

그러면 리스트의  행마다 위 구조가 작동되게 만드시거나

 

처음부터 리스트의 각 행마다 처리할 구조를 다시 잡고

탭이 작동하게 만들어야 올바르게 작동할것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1,499
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT