Bootstrap4 选项卡方法详解

这是标准 bootstrap 程序的选项卡方法：

show

激活给定的选项卡并显示其关联的窗格。 之前选择的任何其他选项卡都将变为未选择状态，并且其关联的窗格将隐藏。

$(document).ready(function(){
    $("#myTab a:last").tab("show"); // show last tab
});

尝试一下

dispose

此方法销毁元素的选项卡（即删除 DOM 元素上存储的数据）。

$(document).ready(function(){
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getInstance($("#myTab a:last")[0]);
        console.log(lastTab);
        // {_element: a.nav-link}

        $("#myTab a:last").tab("dispose");
        console.log(lastTab);
        // {_element: null}
    });
});

尝试一下

getInstance

这是一个静态方法，它允许我们获取与 DOM 元素关联的选项卡实例。

$(document).ready(function(){
    // Get tab instance on button click
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getInstance($("#myTab a:first")[0]);
        console.log(lastTab);
        // {_element: a.nav-link.active}
    });
});

尝试一下

getOrCreateInstance

这是一种静态方法，它允许我们获取与 DOM 元素关联的选项卡实例，或者在选项卡未初始化的情况下创建一个新的实例。

$(document).ready(function(){
    // Get or create tab instance on button click
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getOrCreateInstance($("#myTab a:first")[0]);
        console.log(lastTab);
        // {_element: a.nav-link.active}
    });
});

尝试一下