不同颜色的选定选项卡

Answer 1

要实现您所描述的行为，其中每个选项卡的所选选项卡的背景颜色都不同，您可以修改 jQuery 代码以在单击选项卡时捕获跨度 ID，然后使用该信息设置适当的背景颜色。

这是 jQuery 代码的更新版本：

(function($) {
    $(document).ready(function() {
        // Function to set the background color based on the span ID
        function setTabBackgroundColor(spanId) {
            // Remove existing classes based on span IDs
            $(".tab-content").removeClass("span-00 span-01 span-02 span-03");
            // Add the class based on the provided span ID
            $(".tab-content").addClass(spanId);
        }

        // Initial check on page load
        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();
            setTabBackgroundColor(query);
        }

        // Click event for tabs
        $("ul.nav.nav-tabs li a").on("click", function() {
            var spanId = $(this).find("span").attr("id");
            setTabBackgroundColor(spanId);
        });
    });
})(jQuery);

通过此代码，它引入了 setTabBackgroundColor 函数，该函数根据跨度 ID 删除现有的类，并根据提供的跨度 ID 添加适当的类。选项卡的单击事件现在调用此函数来在单击选项卡时更新背景颜色.针对不同的span ID相应地调整CSS。

Answer 2

这是一个更干净的版本，简化了一些逻辑并使其更像 jQuery。

var $tabView = $('.tab-view');

// Let's simulate loading tab Span02
var tabId = window.location.hash.substring(1) || 'builder_tabs-2'
handleNavigation($tabView, tabId);

// Click handler
$tabView.on('click', '.nav-tabs a', function(e) {
  var tabId = new URL(this.href).hash.substring(1);
  handleNavigation($tabView, tabId);
});

function setActiveTab($tabView, tabId) {
  // Tabs
  $tabView
    .find('.tab-buttons .nav-tabs li')
    .removeClass('active')
    .find('a[href="#' + tabId + '"]')
    .closest('li')
    .addClass('active');
  // Panes
  $tabView
    .find('.tab-content .tab-pane')
    .removeClass('active')
    .filter('#' + tabId)
    .addClass('active');
}

function handleNavigation($tabView, tabId) {
  if (tabId) {
    setActiveTab($tabView, tabId);
  }
}

:root {
  --tab-active: lightblue;
  --tab-inactive: lightgrey;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-view {
  display: flex;
  flex-direction: column;
  border: thin solid grey;
}

.tab-buttons ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab-buttons ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: lightgrey;
  flex: 1;
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--tab-inactive);
}
.tab-buttons ul li.active {
  background: var(--tab-active);
}

.tab-buttons ul li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tab-content .tab-pane {
  display: none;
  background: var(--tab-active);
  padding: 1rem;
}

.tab-content .tab-pane.active {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="tab-view">
  <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>
</div>