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
1
A
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
- 1. Foundation Tabs Hover Hintergrundfarbe
- 2. Selenium ChromeDriver Switch Tabs
- 3. Middleman mit Foundation 6
- 4. Registerkarte "Firing Foundation 6" aus mehreren Links
- 5. Foundation 6 Core js Fehler
- 6. Zurbs Foundation 6 Disable Forms
- 7. Gulp & Foundation 6 nicht kompilieren
- 8. Automatisch html Tabs wechseln
- 9. Wie funktioniert die Zurb Foundation Switch Kontrolle?
- 10. XCode 6 Tableiste Tabs ausgegraut
- 11. Zurb Foundation 6 Sticky-Switch-Status am Ende der Ansichtsfensterhöhe ".is-verankert .is-at-bottom"
- 12. Switch View mit Tabs in Polymer 1.0
- 13. Jquery Tabs automatisch scrollen/drehen
- 14. Visual Studio Tabs automatisch organisieren?
- 15. Sticky close-Taste für Foundation 6 offenbaren
- 16. Foundation 6 Seite funktioniert nur in Chrom?
- 17. Foundation 6 Button Group Expanded funktioniert nicht
- 18. Responsive globale Schriftgröße auf Foundation 6
- 19. Foundation 6 Slider Update auf Seite laden
- 20. Gulp-Sass nicht kompilieren Foundation 6 richtig
- 21. Foundation 6 - Spalten sind nicht float left?
- 22. Foundation 6 mit Rails Simple Form
- 23. Foundation 6 und ISOTope Column Width Ausgabe
- 24. Foundation 6 Nested Reveal respektiert nicht multipleOpened
- 25. Foundation 6, Reveal Modal nicht weiß
- 26. Mit ZURB Foundation 6 Javascript mit jspm
- 27. Getting smoothState.js und Foundation 6 zusammenarbeiten
- 28. Foundation 6 Orbit: Änderung Slide programmatisch
- 29. Wie kann man den Header-Bereich mit der zub foundation 6 automatisch skalieren?
- 30. Brauchen 6 Tabs in Tab-Leiste