크롬80버전 결제 이슈, 영카트5 주요패치 확인!

게시판 리스트에 탭 구현?

컨텐츠몰 10% 할인 기간연장!
그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
게시판 리스트에 탭 구현?

QA

SIR 컨텐츠몰 10% 특별할인 - 코로나19 바이러스로 어려운 시기, SIR이 함께 하겠습니다.

게시판 리스트에 탭 구현?

본문

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

 

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

 

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

 

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

 

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

 

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

 

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

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

주소복사
채택됨
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 85,658 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT