如何在单击其他选项卡时使内容向后滑动？

<ul class="tabs">
  <li class="tab">选项卡1</li>
  <li class="tab">选项卡2</li>
  <li class="tab">选项卡3</li>
</ul>

<div class="content">
  <div class="tab-content">内容1</div>
  <div class="tab-content">内容2</div>
  <div class="tab-content">内容3</div>
</div>

.tabs {
  display: flex;
  justify-content: space-between;
}

.tab {
  cursor: pointer;
}

.content {
  height: 200px;
  overflow: hidden;
}

.tab-content {
  display: none;
}

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 隐藏所有内容区域
    contents.forEach(content => {
      content.style.display = 'none';
    });

    // 显示点击选项卡对应的内容区域
    contents[index].style.display = 'block';
  });
});