自动切换基础 6 标签

Question

我在最近的项目中使用的是 foundation 6，它下面有一个带有选项卡的滑块，所以我决定使用内置的 foundation 6 选项卡并通过 JavaScript 自动切换它们，问题是我找不到在 setInterval 函数的下一个选项卡上调用它的函数，例如 Bootstrap 的 show("tab") 函数。

Answer 1

我想出了解决方案，方法是将 is-active class 添加到下一个选项卡和选项卡面板

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);
});

自动切换基础 6 标签

Switch foundation 6 tabs automatically

jquery

zurb-foundation