通过jQuery实现跳转后激活Bootstrap第二个Tab标签页

场景回顾 #

你现在的情况是：

• index.html里的「know more」链接可以正常跳转到maintenance schedule.html
• 目标页面默认激活第一个Tab（第一个<li>和第一个tab-pane带有active类）
• 需要实现跳转后自动切换到第二个Tab，也就是移除第一个元素的active类，给第二个元素加上

具体实现步骤 #

第一步：给跳转链接添加标识参数

先修改index.html里的链接，加上一个URL参数，让目标页面知道我们要切换到第二个Tab：

<div class="ban_km font_bold"> 
  <a class="redrct_tab" href="Maintenance-schedule?tab=warranty">know more</a> 
</div>

这里加了?tab=warranty，对应第二个Tab的id="warranty"，这样目标页面能精准识别需求。

第二步：在目标页面添加jQuery逻辑

在maintenance schedule.html的页面底部（确保jQuery已经引入）添加这段脚本：

$(document).ready(function() {
  // 解析URL里的参数
  const urlParams = new URLSearchParams(window.location.search);
  const targetTab = urlParams.get('tab');
  
  // 如果参数存在且指向第二个Tab，执行切换
  if (targetTab === 'warranty') {
    // 移除第一个Tab的激活状态
    $('#leadbann li.active').removeClass('active');
    $('.tab-content .tab-pane.active').removeClass('active');
    
    // 给第二个Tab添加激活状态
    $('#leadbann li:nth-child(2)').addClass('active');
    $('#warranty').addClass('active');
  }
});

补充说明 #

• 用URL参数的好处是直观，用户刷新页面后Tab状态依然保持，也不会影响其他方式进入这个页面的用户
• 选择器用nth-child(2)或者:eq(1)都可以（注意jQuery的:eq()索引从0开始），直接选#warranty对应的面板更精准，避免结构变动出问题
• 先移除旧的active类再添加新的，能防止多个Tab同时处于激活状态

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