테스트 사이트 - 개발 중인 베타 버전입니다

next prev 버튼을 무한으로 하려면 어떻게 해야할까요.. 채택완료

헛둘헛둘 3년 전 조회 1,835

현재 소개페이지때문에 간단한 탭메뉴를 만들고 있는데요

탭메뉴에    [  이전  , 다음 ] 버튼을 넣고 있거든요

뭘 제대로 알고하는건 아니고, 어디서 샘플 같은거 있으면 들여다보면서 최대한

제 수준 ( 초보 ) 에 맞게 간단히 하면서 하고 있는데..

 

아래와 같은식으로 하려고 하고 있거든요.

 

 

 

이전 혹은 다음 버튼은  스크립트로

li 기준으로  a 를 찍는형식으로 해서

이전버튼 다음버튼을 넣었는데..

 

일딴 탭메뉴 잘되고 있고, 이전 다음버튼 잘되고 있습니다 ㅠ

 

한데....다음버튼을 막 눌러서......이걸..마지막 단계로 가게되면 다시 처음 1번이 나오게 하고싶거든요..

( 무한으로 돌고싶은데..)

검색을 해봐도..이게 뭔지 몰라서..엄한것만 나오고 있고...

 

어떤식으로 해야할까...지혜를 좀 구해봅니다 ㅠ 

(뭘공부해야하는지 그런것)

 

css는 아직 하나도 안했고..그냥 제가 쓴 기본 코드입니다

 

</p>

<p> </p>

<p><!----------- ul ---------></p>

<p>  <ul class="nav nav-tabs" role="tablist"></p>

<p> </p>

<p>    <li class="active"><a href="#test_a1" role="tab" data-toggle="tab">테스트A</a></li>

    <li><a href="#test_a2" role="tab" data-toggle="tab"></p>

<p>     테스트B</a></li>

    <li><a href="#test_a3"  role="tab" data-toggle="tab"></p>

<p>     테스트C</a></li></p>

<p> </p>

<p>   </ul></p>

<p><!----------- 이전 다음 버튼 ---------></p>

<p>    <a class="btn btn-primary btnPrevious" >이전</a>

    <a class="btn btn-primary btnNext" >다음</a></p>

<p> </p>

<p><!----------- 컨텐츠 내용--------->

  <div class="tab-content"></p>

<p>    <div role="tabpanel" class="tab-pane fade in  active" id="test_a1"></p>

<p>    A내용

    </div></p>

<p>

    <div role="tabpanel" class="tab-pane fade" id="test_a2"></p>

<p>    B내용</p>

<p>    </div></p>

<p>

    <div role="tabpanel" class="tab-pane fade" id="test_a3"></p>

<p>    C내용</p>

<p>    </div>  

  </div></p>

<p> </p>

<p><!----------- 이전 다음 버튼 스크립트 --------->

<script>

 $('.btnNext').click(function(){

  $('.nav-tabs  > .active').next('li').find('a').trigger('click');

});</p>

<p>  $('.btnPrevious').click(function(){

  $('.nav-tabs  > .active').prev('li').find('a').trigger('click');

});

</script></p>

<p> </p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
e
3년 전
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

헛둘헛둘
3년 전
감사합니다! 보고 공부해보겠습니다!!!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인