当 DOM 准备就绪时，使用 js 加载引导选项卡代码

Bootstrap tab code loading with js when DOM gets ready

本文关键字：选项 代码 加载 js 准备就绪 DOM 使用      更新时间：2023-09-26

我正在使用引导选项卡，并使用http请求加载初始活动选项卡。当我单击选项卡时，js 工作正常。但是我想在最初加载的内容上调用其他一些 js，为此我需要通过data: {tab: target}发送，所以我决定在页面加载时使用 js 加载初始选项卡内容（就像其他人在单击选项卡时加载一样，只是触发事件不同）。

问题是我不知道如何在页面加载后立即触发 AJAX，以及如何为不同类型的触发器（加载/单击）正确组织我的代码。

这是单击选项卡时的工作代码：

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
  var target = $(this).data("activetab");
  var href = $(this).data("link");
  $.ajax({
    type: "GET",
    url: href,
    data: {tab: target},
    dataType: "script"
  });
});

.html：

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#filestab" aria-controls="filestab" role="tab" data-toggle="tab" data-link = "<%= get_files_user_common_medias_path(@user)%>" data-activetab="file">Files</a></li>
  <li role="presentation"><a href="#linkstab" aria-controls="linkstab" role="tab" data-toggle="tab" data-link = "<%= get_links_user_common_medias_path(@user)%>" data-activetab="link">Links</a></li>
  <li role="presentation"><a href="#calendarstab" aria-controls="calendarstab" role="tab" data-toggle="tab" data-link = "<%= common_medias_user_common_medias_path(@user)%>" data-activetab="calendar">Calendar</a></li>
</ul>

如果您只想由 AJAX 加载第一个选项卡，并且每次单击要重新加载的选项卡时，请保留您拥有的内容，然后添加：

$('[href="#filestab"]').tab('show');

显然，您需要从第一个选项卡中删除class="active"。 否则，它不会触发 show 事件，因为它已被选中。

引导选项卡方法。

JSFiddle.

相关文章：