如何实现Bootstrap标签页切换后才加载对应内容的功能？

实现逻辑 #

• 利用Bootstrap 4标签组件原生的切换事件做触发
• 给非初始展示的标签面板加加载状态标记，避免重复触发加载
• 仅在用户第一次点击对应标签时，执行内容渲染/接口请求逻辑

代码修改步骤 #

1. 调整HTML标签面板结构 #

你可以先把tab2、tab3的初始内容清空，添加data-loaded属性标记加载状态，也可以按需加加载提示占位：

<!-- Tab panes -->
<div class="tab-content tabcontent-border">
    <div class="tab-pane active show" id="tab1" role="tabpanel">
        <div class="p-20">
            Load this content...
        </div>
    </div>
    <!-- 未加载的tab2、tab3加data-loaded标记，初始为false -->
    <div class="tab-pane p-20" id="tab2" role="tabpanel" data-loaded="false"></div>
    <div class="tab-pane p-20" id="tab3" role="tabpanel" data-loaded="false"></div>
</div>

2. 添加JS控制逻辑 #

在原有引入的JS资源后添加以下代码即可：

$(function() {
    // 监听标签切换完成事件
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // 获取当前激活的标签对应的面板ID
        const targetPane = $($(e.target).attr('href'));
        // 判断是否已经加载过
        if (targetPane.data('loaded') === false) {
            // 加载中提示可自定义
            targetPane.html('<div class="loading">加载中...</div>');
            
            // 这里替换为你的实际加载逻辑：
            // 场景1：加载静态内容，直接插入即可
            if (targetPane.attr('id') === 'tab2') {
                targetPane.html('Load this AFTER clicking [TAB2]');
            } else if (targetPane.attr('id') === 'tab3') {
                targetPane.html('Load this AFTER clicking [TAB3]');
            }
            
            // 场景2：异步请求后端接口拿内容，示例如下：
            /*
            $.get('/你的接口地址', {tabId: targetPane.attr('id')}, function(res) {
                targetPane.html(res);
                // 请求完成后更新加载状态
                targetPane.data('loaded', true);
            })
            */
           
            // 加载完成后更新状态，避免重复加载
            targetPane.data('loaded', true);
        }
    })
})

效果说明 #

页面初始化时只会渲染TAB1的内容，TAB2、TAB3的内容不会在初始阶段执行渲染/请求逻辑，只有用户第一次点击对应标签时才会触发加载，再次切换也不会重复请求。

内容的提问来源于stack exchange，提问作者Mark