如何使被点击的页签及其内容处于活动状态，而使其他内容处于非活动状态？

<div class="tabs">
  <div class="tab active" onclick="changeTab(0)">Tab 1</div>
  <div class="tab" onclick="changeTab(1)">Tab 2</div>
  <div class="tab" onclick="changeTab(2)">Tab 3</div>
</div>

<div class="content">
  <div class="tab-content active">Content 1</div>
  <div class="tab-content">Content 2</div>
  <div class="tab-content">Content 3</div>
</div>

.tabs {
  display: flex;
}

.tab {
  padding: 10px;
  cursor: pointer;
}

.tab.active {
  background-color: #ccc;
}

.content {
  margin-top: 10px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

function changeTab(index) {
  // 获取所有页签和内容区域的元素
  var tabs = document.getElementsByClassName('tab');
  var tabContents = document.getElementsByClassName('tab-content');

  // 移除所有页签和内容区域的活动状态
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
    tabContents[i].classList.remove('active');
  }

  // 设置被点击的页签和内容区域为活动状态
  tabs[index].classList.add('active');
  tabContents[index].classList.add('active');
}