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

헛둘헛둘

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-09-20 (화) 02:21:26 2,036

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

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

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

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

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

3690604471_1663607638.8828.png

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

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

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

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

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

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

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

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

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

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

Copy

<!----------- ul --------->

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

 

    <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">

     테스트B</a></li>
    <li><a href="#test_a3"  role="tab" data-toggle="tab">

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

 

   </ul>

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

    <a class="btn btn-primary btnPrevious" >이전</a>
    <a class="btn btn-primary btnNext" >다음</a>

 

<!----------- 컨텐츠 내용--------->
  <div class="tab-content">

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

    A내용
    </div>


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

    B내용

    </div>


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

    C내용

    </div>  
  </div>

 

<!----------- 이전 다음 버튼 스크립트 --------->
<script>
 $('.btnNext').click(function(){
  $('.nav-tabs  > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs  > .active').prev('li').find('a').trigger('click');
});
</script>

그누보드5