如何使Tabs面板的每个框在被选中时着色？

<ul class="tabs">
  <li class="tab" onclick="selectTab(1)">Tab 1</li>
  <li class="tab" onclick="selectTab(2)">Tab 2</li>
  <li class="tab" onclick="selectTab(3)">Tab 3</li>
</ul>

<div class="tab-content">
  <div id="tab1" class="content">Content for Tab 1</div>
  <div id="tab2" class="content">Content for Tab 2</div>
  <div id="tab3" class="content">Content for Tab 3</div>
</div>

.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-content {
  margin-top: 10px;
}

.content {
  display: none;
}

.selected {
  background-color: #ff0000;
}

function selectTab(tabIndex) {
  // Remove selected class from all tabs
  var tabs = document.getElementsByClassName("tab");
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("selected");
  }
  
  // Add selected class to the clicked tab
  var selectedTab = document.getElementById("tab" + tabIndex);
  selectedTab.classList.add("selected");
  
  // Show the corresponding content
  var contents = document.getElementsByClassName("content");
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = "none";
  }
  selectedTab.style.display = "block";
}