如何在Bootstrap中为每个Pill标签页设置对应内容区域背景色？

没问题，这事儿不难搞定！咱们一步步来实现：

第一步：补全并优化你的HTML结构 #

先把标签页内容区域的结构补完整，给每个内容面板加上对应的标识类，方便后续关联样式：

<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a class="adopt-tab" href="#1a" data-toggle="tab">ADOPT</a>
    </li>
    <li>
      <a class="donate-tab" href="#2a" data-toggle="tab">DONATE</a>
    </li>
    <li>
      <a class="join-tab" href="#3a" data-toggle="tab">JOIN</a>
    </li>
  </ul>

  <!-- 标签内容区域 -->
  <div class="tab-content mt-3">
    <div class="tab-pane active adopt-content" id="1a">
      <!-- 领养板块内容 -->
      <p>这里是领养相关的内容...</p>
    </div>
    <div class="tab-pane donate-content" id="2a">
      <!-- 捐赠板块内容 -->
      <p>这里是捐赠相关的内容...</p>
    </div>
    <div class="tab-pane join-content" id="3a">
      <!-- 加入板块内容 -->
      <p>这里是加入相关的内容...</p>
    </div>
  </div>
</div>

第二步：编写关联样式 #

给每个标签的激活态和对应内容区域设置匹配的背景色，同时调整文字色保证可读性：

/* 领养标签激活态与对应内容背景 */
.nav-pills li.active .adopt-tab {
  background-color: #28a745; /* 绿色系 */
  color: #fff;
}
.adopt-content.active {
  background-color: #28a745;
  color: #fff;
  padding: 15px;
  border-radius: 4px;
}

/* 捐赠标签激活态与对应内容背景 */
.nav-pills li.active .donate-tab {
  background-color: #dc3545; /* 红色系 */
  color: #fff;
}
.donate-content.active {
  background-color: #dc3545;
  color: #fff;
  padding: 15px;
  border-radius: 4px;
}

/* 加入标签激活态与对应内容背景 */
.nav-pills li.active .join-tab {
  background-color: #007bff; /* 蓝色系 */
  color: #fff;
}
.join-content.active {
  background-color: #007bff;
  color: #fff;
  padding: 15px;
  border-radius: 4px;
}

第三步：可选增强——动态联动控制 #

如果你的Bootstrap版本是4+，上面的CSS已经能自动生效了——因为Bootstrap切换标签时，会给当前激活的<li>和对应内容面板自动加上active类。要是你需要更灵活的动态控制（比如后续要修改颜色），可以加一段jQuery代码监听标签切换事件：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // 移除所有内容区域的背景类
  $('.tab-content .tab-pane').removeClass('adopt-bg donate-bg join-bg');
  
  // 根据当前激活的标签，给对应内容区域添加匹配的背景类
  const activeTabPrefix = $(e.target).attr('class').split('-tab')[0];
  $(e.target.getAttribute('href')).addClass(`${activeTabPrefix}-bg`);
});

使用这段JS的话，记得把CSS里的.adopt-content.active改成.adopt-bg，其他标签同理，这样后续调整颜色只需要修改对应类的样式即可。

这样一来，每次切换标签时，内容区域的背景色就会和当前激活标签的颜色完全匹配啦！

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