从引导选项卡捕获“显示”事件

Capturing 'shown' event from bootstrap tab

本文关键字：显示 事件 选项      更新时间：2023-09-26

我的页面上有一些"静态"HTML：

<div id="DIVISIONS">
    <ul class="nav nav-tabs" id="DIVISIONTABS">
        @* <li> nodes will be injected here by javascript *@
    </ul>
    <div class="tab-content" id="DIVISIONTABPANES">
        @* <div class="tab-pane"> nodes will be injected here by javascript *@
    </div>
</div>

在页面加载时，我创建了一个选项卡"框架"，即创建引导选项卡和选项卡内容容器。

我通过以下方式触发该过程：

$(window).bind("load", prepareDivisionTabs);

而"prepareDivisionTabs"就是这样做的：

function prepareDivisionTabs() {
    // Retrieve basic data for creating tabs
    $.ajax({
        url: "@Url.Action("GetDivisionDataJson", "League")",
        cache: false
    }).done(function (data) {
        var $tabs = $('#DIVISIONTABS').empty();
        var $panes = $('#DIVISIONTABPANES').empty();
        for (var i = 0; i < data.length; i++) {
            var d = data[i];
            $tabs.append("<li><a href='"#TABPANE" + d.DivisionId + "'" data-toggle='"tab'">" + NMWhtmlEncode(d.Name) + "</a></li>");
            $panes.append("<div id='"TABPANE" + d.DivisionId + "'" class='"tab-pane'"></div>")
        }
        renderDivisionTabPaneContents(data);
    }).fail(function (err) {
        alert("AJAX error in request: " + JSON.stringify(err, null, 2));
    });
}

有关信息，上面的"renderDivisionTabPaneContent"执行以下操作：

function renderDivisionTabPaneContents(data) {
    for (var i = 0; i < data.length; i++) {
        var d = data[i];
        renderDivisionTabPaneContent(d.DivisionId);
    }
}
function renderDivisionTabPaneContent(id) {
    var $tabPane = $('#TABPANE' + id);
    $tabPane.addClass("loader")
    $.ajax({
        url: "/League/GetDivisionPartialView?divisionId=" + id,
        cache: false
    }).done(function (html) {
        $tabPane.html(html);
    }).fail(function (err) {
        alert("AJAX error in request: " + JSON.stringify(err, null, 2));
    }).always(function () {
        $tabPane.removeClass("loader")
    });
}

到目前为止一切都很好。 我的页面加载，我的选项卡内容呈现，当我单击不同的选项卡时，将显示相关内容。

现在，我想使用选项卡的"display"事件及时加载选项卡内容，而不是在开始时加载所有内容。 为了测试这一点，我只想确保在显示选项卡时可以收到 javascript 警报。 因此，我创建以下内容来触发选项卡显示事件的附件：

$(function () {
    attachTabShownEvents();
})

其中调用：

function attachTabShownEvents() {
    $(document).on('shown', 'a[data-toggle="tab"]', function (e) {
        alert('TAB CHANGED');
    })
}

因此，我希望在更改选项卡后看到"选项卡已更改"警报。 但。。。我没有看到任何警报。

有人可以在这里帮我吗？

选项卡更改的正确事件绑定是 shown.bs.tab 。

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert('TAB CHANGED');
})

更新 11-01-2020 ---引导 4.5

这仍然是正确答案，但是，这是在官方引导文档页面底部找到的一些其他有用信息：https://getbootstrap.com/docs/4.5/components/navs/#tabs

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

您可以使用 e.target 确定每次触发代码时选择了哪个选项卡。

如果您的元素上有唯一的 ID，则可以执行以下操作，以便代码仅在单击相应的选项卡时运行。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  switch (e.target.id){
      case "mainTab":{
           doMainTabStuff();
           break;
      }
      case "configTab":{
           doConfigTabStuff();
           break;
      }
  }
})

<a data-toggle="tab" href="#some_special_tab_anchor">
<div id="some_special_tab_anchor" class="tab-pane fade">
    special tab content
</div>
            $( 'a[data-toggle="tab"]' ).on( 'shown.bs.tab', function( evt ) {
                var anchor = $( evt.target ).attr( 'href' );
                alert("TAB SHOWN = "+anchor);
                // take action based on what tab was shown
               if(anchor === "some_special_tab_anchor"){
                  // do my special thing :)
               }
            });

在这里使用我的 Nuget 包延迟加载引导选项卡，它非常简单，只需将"lazyload"类添加到引导选项卡的"ul"元素，然后添加等于URL的"data-URL"以加载到任何选项卡锚元素（a）。就是这样。

https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/

"显示"和"显示"事件对我不起作用。我的解决方案并不完全是针对OP的情况，但一般概念就在那里。

我在引导程序强制自己的点击事件时遇到了同样的问题在选项卡（菜单按钮和内容面板）上。我想根据单击的菜单按钮延迟将内容加载到面板中，一些按钮在当前页面上显示面板，其他按钮将页面加载到 iframe 中。

起初，我将数据填充到隐藏的表单字段标签中，这是同样的问题。诀窍是检测某种变化并采取行动。我通过强制更改并使用替代事件侦听按钮而不必触摸引导程序来解决问题。

1） 将 iframe 目标存储在按钮中作为数据属性：

$('#btn_for_iframe').attr('data-url',iframeurl);

2）将替代事件绑定到火上，在里面，换掉 iframe 源

$('#btn_for_iframe').on('mouseup',function(){
   console.log(this+' was activated');
   $('#iframe').attr('src',$('#btn_for_iframe').attr('data-url'));
});

3） 在面板显示上强制"更改"事件，然后加载 iframe SRC

$('#iframe_panel_wrapper').show().trigger('change');

或者，您可以将更改触发器放在上面的鼠标向上。

$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    $('.nav-tabs a').on('shown.bs.tab', function(event){
        alert('tab shown');
    });
});

vanilla js （Bootstrap 5.3）

myTabBtn.addEventListener('shown.bs.tab', function(e) {
    e.preventDefault();
    // your code
});
相关文章：