使用jQuery在Bootstrap中从外部页面打开指定标签页时内容不显示

你的问题核心是只手动添加了active类，但没触发Bootstrap标签页的内部逻辑，而且Bootstrap 4+版本的标签内容面板需要同时有active和show两个类才能显示。

问题分析 #

1. 你当前的脚本只给.tab-pane加了active类，但Bootstrap 4及以上版本中，标签内容面板需要active show两个类才能正常显示
2. 没有调用Bootstrap官方的tab('show')方法，这个方法会处理标签切换的所有内部状态更新、事件触发，单纯加类无法替代
3. setTimeout('1000')用字符串传参不规范，且延迟1秒没必要，改用DOM加载完成事件更可靠

修正后的代码 #

jQuery(document).ready(function() {
  var href = window.location.hash;
  // 检查哈希存在、对应标签链接存在、标签容器存在
  if (href && jQuery('a[href="' + href + '"]').length && jQuery('.post-3167 .nav.nav-tabs').length) {
    // 先移除所有标签的active状态
    jQuery('.post-3167 .nav.nav-tabs .nav-item').removeClass('active');
    jQuery('.post-3167 .tab-content .tab-pane').removeClass('active show');
    
    // 激活目标标签项
    jQuery('a[href="' + href + '"]').parent().addClass('active');
    // 调用Bootstrap的tab方法显示内容，自动添加active和show类
    jQuery('a[href="' + href + '"]').tab('show');
  }
});

额外说明 #

• 如果你的页面有异步加载标签内容的情况（比如通过AJAX加载），可以保留setTimeout但改成数字参数setTimeout(function(){...}, 500)，根据实际加载时间调整延迟
• 确保你的Bootstrap版本和代码匹配：Bootstrap 3的标签内容只需要active类，但Bootstrap 4+需要active show，调用tab('show')方法会自动处理这些类，不用手动加

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