我的页面上有一些“静态”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));
});
}
为了提供信息,上面的“renderDivisionTabPaneContents”可以做到这一点:
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")
});
}
**到目前为止一切正常。**我的页面加载,我的标签内容呈现,当我单击不同的标签时,显示相关内容。
现在,我不想一开始就加载所有内容,而是想通过使用选项卡的“显示”事件来实时加载选项卡内容。为了测试这一点,我只想确保当标签显示时,我可以得到一个javascript警报。因此,我创建以下内容来触发tab shown事件的附件:
$(function () {
attachTabShownEvents();
})
其调用:
function attachTabShownEvents() {
$(document).on('shown', 'a[data-toggle="tab"]', function (e) {
alert('TAB CHANGED');
})
}
因此,我希望在更改选项卡后看到“TAB CHANGED”警报。但是...我没看到警报。
有人能帮帮我吗?
6条答案
按热度按时间up9lanfz1#
选项卡更改的正确事件绑定是
shown.bs.tab
。更新11-01-2020 --- Bootstrap 4.5
这仍然是正确的答案,但是,这是一个额外的有用信息,可以在官方bootstrap docs页面的底部找到:https://getbootstrap.com/docs/4.5/components/navs/#tabs
您可以确定每次使用
e.target
触发代码时选择了哪个选项卡。如果元素上有唯一的ID,那么可以执行以下操作,这样代码就只在单击相应的选项卡时运行。
ffvjumwh2#
j9per5c43#
使用我的Nuget包lazyloading引导标签在这里,它非常简单,只需添加“lazyload”类到引导标签的“ul”元素,然后添加“data-url”等于url加载到任何标签锚元素(a)。就是这样。
https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/
guicsvcw4#
“show”和“showed”事件对我不起作用。我的解决方案并不完全是OP的情况,但一般的概念是存在的。
我也遇到了同样的问题,bootstrap在选项卡(菜单按钮和内容面板)上强制执行自己的onclick事件。我想根据点击的菜单按钮来延迟加载东西到面板中,一些按钮在当前页面上显示面板,其他按钮将页面加载到iframe中。
起初,我将数据填充到一个隐藏的表单字段标记中,这也是同样的问题。诀窍是发现某种变化并采取行动。我解决了这个问题,通过强制更改和使用备用事件侦听按钮,而不必触摸 Bootstrap 。
1)将iframe目标隐藏在按钮中作为数据属性:
2)将alternate event绑定到fire off thingy上,然后在里面交换iframe源代码
3)在面板显示中强制'change'事件,然后加载iframe src
或者你可以把改变触发器放在上面的mouseup中。
jhdbpxl95#
d8tt03nd6#
vanilla js(Bootstrap 5.3)