Question

我在我最近的项目中使用了基础6，并且在它下面有一个带有标签的滑块，所以我决定使用内置的基础6标签并通过JavaScript自动切换它们，问题是我可以＆＃39 ;找到函数在setInterval函数的下一个选项卡上调用它，就像Bootstrap的show("tab")函数一样。

Answer 1

我通过将is-active类添加到下一个标签和标签面板来提出解决方案

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个选项卡

1 个答案: