[jQuery] 일정 시간이 지나면 자동으로 넘어가는 탭

https://hongpage.kr/16

[jQuery] 기본 탭 소스

지난번 올린 기본 탭 소스 포스팅은 탭 메뉴를 클릭 했을 때 내용이 바뀌는 방식이었다.

 

 

이 코드는 기본 탭 코드와 동일하게 탭 메뉴를 클릭했을 때 내용이 바뀌는 방식 뿐만아니라

auto switch 를 활용해서 탭 메뉴를 클릭하지 않아도 일정시간이 지나면 다음 탭으로 넘어가는 코드이다.

다른 것은 동일하고 스크립트만 변경하면 된다.

 

탭 넘어가는 속도는 3000 숫자를 조정하면 된다.

 

<script>
$(function () {
    
    /*auto switch */
    var tabs = $('.tabs li');
    var timerId = 0;    
    
    timerId = setInterval(function() {
    var onTab = tabs.filter('.active');
    var nextTab = onTab.index() < tabs.length-1 ? onTab.next() : tabs.first();
    nextTab.click();
    }, 3000);      
      
    $(".tab_container").mouseleave(function () {

    timerId = setInterval(function() {
    var onTab = tabs.filter('.active');
    var nextTab = onTab.index() < tabs.length-1 ? onTab.next() : tabs.first();
    nextTab.click();
    }, 3000);        
        
    });

    $(".tab_container").mouseenter(function () {
        clearInterval(timerId);
       });
    
    
    /* tab 기존코드 */
    
    $(".tab_content").hide();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active").css("color", "#555");
        $(this).addClass("active").css("color", "#fff");
        $(".tab_content").hide()
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn()
    });            
                    
});
</script>