如何实现标签页内切换时基于span ID动态设置背景色？

现有页面包含指向带标签页页面的链接：

<a href="https://example.com/page#span-01">Goal</a>

目标页面HTML结构：

<div id="builder_tabs" class="tab-buttons tab-buttons-left">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#builder_tabs-0" data-toggle="tab">
      <span id="span-00">Span00</span></a></li>
    <li><a href="#builder_tabs-1" data-toggle="tab">
      <span id="span-01">Span01</span></a></li> 
    <li><a href="#builder_tabs-2" data-toggle="tab">
      <span id="span-02">Span02</span></a></li>
    <li><a href="#builder_tabs-3" data-toggle="tab">
      <span id="span-03">Span03</span></a></li>
  </ul>
<div class="clearboth"></div>
</div>
<div class="tab-content">
  <div class="tab-pane fade active in" id="builder_tabs-0"><strong>Tab-0</strong>
      <p>Lorem Ipsum text</p>
  </div>
  <div class="tab-pane fade" id="builder_tabs-1"><strong>Tab-1</strong>   
      <p>Lorem Ipsum text</p>
  </div>      
  <div class="tab-pane fade" id="builder_tabs-2"><strong>Tab-2</strong>   
      <p>Lorem Ipsum text</p>
  </div>      
  <div class="tab-pane fade" id="builder_tabs-3"><strong>Tab-3</strong>   
      <p>Lorem Ipsum text</p>
  </div>
</div>

原有jQuery代码（仅处理哈希跳转场景）：

(function($) {
  $(document).ready( function() {
      var query = window.location.hash.substring(1);
      if ($(query) ) {
          $("ul.nav.nav-tabs li").removeClass("active");
          $("#"+query).closest("li").addClass("active "+query );
          $(".tab-content").addClass(query).show();
          $(this).addClass(query).show();
      } 
  });
})(jQuery);

原有CSS（仅示例span-01）：

.tab-content.span-01, li.active.span-01 a { background-color: powderblue;}

目前哈希跳转场景正常，但标签页内切换时无法更新背景色，所有选中标签背景色一致。需要实现：点击标签时获取对应span的ID，将其作为类添加到.tab-content，并同步更新样式。

解决方案 #

1. 修改jQuery代码，添加标签切换监听 #

更新后的代码同时处理哈希跳转和标签点击切换场景，核心逻辑：

• 提取通用的标签激活函数，避免重复代码
• 监听标签点击事件，触发时清除旧类、添加当前span ID类

(function($) {
  $(document).ready(function() {
    // 通用激活标签的函数
    function activateTab(spanId) {
      // 清除所有li的active类和span相关类
      $("ul.nav.nav-tabs li").removeClass(function(index, className) {
        return (className.match(/(^|\s)span-\S+/g) || []).join(' ') + ' active';
      });
      // 清除tab-content的所有span相关类
      $(".tab-content").removeClass(function(index, className) {
        return (className.match(/(^|\s)span-\S+/g) || []).join(' ');
      });
      
      // 添加当前span对应的类和active状态
      $("#" + spanId).closest("li").addClass("active " + spanId);
      $(".tab-content").addClass(spanId);
    }

    // 处理页面加载时的哈希跳转
    var query = window.location.hash.substring(1);
    if ($("#" + query).length) {
      activateTab(query);
    }

    // 监听标签点击事件
    $("ul.nav.nav-tabs a[data-toggle='tab']").on("click", function() {
      // 获取当前标签内的span ID
      var spanId = $(this).find("span").attr("id");
      if (spanId) {
        activateTab(spanId);
        // 可选：更新URL哈希，保持状态同步
        window.location.hash = spanId;
      }
    });
  });
})(jQuery);

2. 扩展CSS，为每个span ID定义不同背景色 #

根据需求为每个span对应的类设置独特样式：

/* Span00 样式 */
.tab-content.span-00, li.active.span-00 a { 
  background-color: #f0f0f0;
}
/* Span01 样式 */
.tab-content.span-01, li.active.span-01 a { 
  background-color: powderblue;
}
/* Span02 样式 */
.tab-content.span-02, li.active.span-02 a { 
  background-color: peachpuff;
}
/* Span03 样式 */
.tab-content.span-03, li.active.span-03 a { 
  background-color: palegreen;
}

关键说明 #

• 使用正则表达式清除所有以span-开头的类，避免类堆积
• 提取通用函数activateTab，同时处理页面加载和点击切换场景
• 可选更新URL哈希，让标签状态与浏览器历史同步，刷新页面也能保持当前标签

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