bootstrap5 选项卡方法详解——迹忆客-ag捕鱼王app官网

这是标准 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}
    });
});