Bootstrap标签页初始加载时激活/当前项未高亮问题

看起来你遇到的是Bootstrap自定义主题里常见的标签页初始化状态问题——页面加载时标记为current的标签页没触发高亮样式，只有点击后才生效。我帮你分析下原因和解决方案：

核心问题分析 #

Bootstrap原生的nav-tabs组件默认依赖active类来识别当前激活的标签页，而你的主题用了自定义的current类。大概率是以下两种情况：

1. 主题的CSS只给点击后添加的激活类设置了青色背景，没给初始的current类对应样式；
2. 主题的JS没有在页面加载完成时，自动将current标签页的状态同步为激活状态（比如没有触发对应的样式切换或内容面板激活）。

解决方案一：修复CSS样式匹配 #

如果主题是通过current类来标记默认激活项，直接给current类的标签页链接添加高亮样式即可：

/* 替换成主题里的青色值，比如你的主题可能用了变量或特定色号 */
.service_tabe_menu li.current a {
  background-color: #00ffff; 
  color: #fff; /* 如果需要文字颜色变化 */
  border-color: #00ffff; /* 同步边框颜色保持一致 */
}

同时别忘了给对应的内容面板也加上激活类（比如current或active），确保内容默认显示：

<div role="tabpanel" class="tab-pane current" id="first">
  <!-- FIRST标签页的内容 -->
</div>

解决方案二：改用Bootstrap原生active类 #

如果主题没有强依赖current类，直接切换成Bootstrap原生的active类更稳妥，因为Bootstrap的JS会自动处理初始化状态：
修改标签页的HTML：

<ul class="service_tabe_menu nav nav-tabs" role="tablist">
  <li role="presentation" class="active"> <!-- 把current换成active -->
    <a href="#first" aria-controls="first" role="tab" data-toggle="tab">FIRST</a>
  </li>
  <!-- 其他标签页 -->
</ul>

对应的内容面板也要加上active类：

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="first">
    <!-- FIRST标签页的内容 -->
  </div>
  <!-- 其他内容面板 -->
</div>

这样页面加载时，Bootstrap的原生JS会自动识别active类，给标签页加上高亮样式，同时显示对应的内容面板。

解决方案三：用JS强制初始化状态 #

如果主题有自定义的JS逻辑处理标签页切换，可能需要在页面加载时手动触发激活状态：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const defaultTab = document.querySelector('.service_tabe_menu li.current a');
  if (defaultTab) {
    // 模拟点击事件，触发主题的高亮逻辑
    defaultTab.click();
    // 或者直接给链接添加主题的激活样式类（比如主题用了active-tab类）
    // defaultTab.classList.add('active-tab');
  }
});

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