2016-05-08 11 views
1

Ich benutze Foundation 6 in meinem letzten Projekt, und es gibt einen Schieberegler mit Tabs darunter, so dass ich beschlossen, in der Grundlage 6 Tabs zu verwenden und sie automatisch über JavaScript wechseln, das Problem ist ich kann keine Funktion finden, um es auf der nächsten Registerkarte in setInterval Funktion, wie Bootstrap show("tab") Funktion aufrufen.Switch foundation 6 tabs automatisch

Antwort

1

Ich habe kam mit der Lösung nach oben, indem Sie die is-active Klasse zum nächsten Reiter und Registerfeld

function tabSwitch() { 
    var tabs = $("ul.tabs"); 
    var tab_content = $(".tabs-content"); 
    var currentTab = tabs.find(".is-active"); 
    var currentPanel = tab_content.find(".is-active"); 

    currentTab.removeClass('is-active').find("[aria-selected]").attr('aria-selected', false); 

    if (currentTab.next('li').length !== 0) { 
     currentTab.next("li").addClass('is-active').find("[aria-selected]").attr('aria-selected', true); 
    } else { 
     tabs.find("li:first").addClass('is-active').find("[aria-selected]").attr('aria-selected', true); 
    } 

    if (currentPanel.next('.tabs-panel').length !== 0) { 
     currentPanel.removeClass("is-active").next(".tabs-panel").addClass("is-active"); 
    } else { 
     currentPanel.removeClass("is-active"); 
     tab_content.find(".tabs-panel:first").addClass("is-active"); 
    } 
} 

var saleTimer = setInterval(tabSwitch, 5000); 

$("ul.tabs").find(".is-active").on("click", function() { 
    clearInterval(saleTimer); 
    saleTimer = setInterval(tabRotate, 5000); 
}); 
Verwandte Themen