使用div作为选项卡，我如何才能更改所单击的选项卡上的背景色，并将其他选项卡重新设置为原始颜色？

<div class="tab" onclick="changeTabColor(this)">选项卡1</div>
<div class="tab" onclick="changeTabColor(this)">选项卡2</div>
<div class="tab" onclick="changeTabColor(this)">选项卡3</div>

.tab {
  background-color: #ccc; /* 原始颜色 */
  padding: 10px;
  cursor: pointer;
}

.tab.active {
  background-color: #ff0000; /* 点击后的背景色 */
}

function changeTabColor(tab) {
  // 移除所有选项卡的active类
  var tabs = document.getElementsByClassName('tab');
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
  }

  // 设置被点击的选项卡为active类
  tab.classList.add('active');
}