如何在标签的左侧进行离子切换？

<div class="tabs">
  <div class="tab" 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">Content 1</div>
  <div class="tab-content">Content 2</div>
  <div class="tab-content">Content 3</div>
</div>

.tabs {
  display: flex;
}

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

.tab-content {
  display: none;
}

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

function changeTab(index) {
  // 获取所有标签和内容区域
  var tabs = document.getElementsByClassName("tab");
  var contents = document.getElementsByClassName("tab-content");

  // 移除所有标签和内容区域的active类
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("active");
    contents[i].classList.remove("active");
  }

  // 添加选中标签和内容区域的active类
  tabs[index].classList.add("active");
  contents[index].classList.add("active");
}