如何实现页面加载时默认选中All标签（黑色带下划线）

解决方案 #

借助你代码中已使用的Bootstrap Tab组件特性，配合优化后的CSS样式即可实现需求：

1. 优化CSS代码（精简冗余，添加选中状态样式）

/* 统一所有Tab的基础样式 */
.tab-link {
  background-color: #fff !important;
  color: #B3B3B3;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  border: none;
}

/* All标签的特殊样式：左上角圆角+粗体 */
.publisher-tab {
  border-radius: 10px 0 0 0;
  font-weight: 700;
}

/* Normal标签的特殊样式：右上角圆角 */
.supporter-tab1 {
  border-radius: 0 10px 0 0;
}

/* 选中状态样式（默认加载+点击切换后） */
.tab-link.active {
  color: #000;
  text-decoration: underline 4px;
}

/* 鼠标悬浮样式 */
.tab-link:hover {
  color: #000;
  text-decoration: underline 4px;
}

2. 修改HTML代码（给默认选中的All标签添加激活类）

<ul class="nav" id="myTab" role="tablist">
  <li style="width: 18%;">
    <!-- 添加.active类，同时加入通用的tab-link类 -->
    <a class="nav-link tab-link publisher-tab active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true">All</a>
  </li>
  <li style="width: 18%;">
    <a class="nav-link tab-link supporter-tab" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">VIP</a>
  </li>
  <li style="width: 18%;">
    <a class="nav-link tab-link supporter-tab1" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Normal</a>
  </li>
</ul>

说明 #

• 用通用类.tab-link统一基础样式，减少重复代码，仅保留每个Tab的特殊样式（圆角、字体粗细）。
• Bootstrap Tab组件会自动管理.active类：点击Tab时给当前选中项添加该类，移除其他项的类，因此只需给.tab-link.active设置选中样式即可实现切换效果。
• 默认给All标签添加.active类，页面加载时直接呈现黑色文本+4px下划线的选中状态。

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