手写一个底部tab切换按钮

好的，这个问题比较简单。底部tab切换按钮通常是用一个容器包裹多个按钮来实现的。以下是一个简单的示例代码：

<div class="tab-container">
  <button class="tab-button active">首页</button>
  <button class="tab-button">新闻</button>
  <button class="tab-button">娱乐</button>
  <button class="tab-button">体育</button>
</div>

其中，`active`类表示当前选中的按钮。您可以使用CSS来控制按钮的样式：

.tab-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #f0f0f0;
}

.tab-button {
  background-color: transparent;
  border: none;
  font-size: 16px;
  padding: 10px 20px;
  outline: none;
  cursor: pointer;
}

.tab-button.active {
  background-color: #fff;
  border-bottom: 2px solid #f00;
  color: #000;
}

在JS中，您可以为每个按钮添加一个点击事件，以便在单击按钮时切换选中状态。以下是一个示例代码：

const buttons = document.querySelectorAll('.tab-button')

buttons.forEach(button => {
  button.addEventListener('click', () => {
    buttons.forEach(b => b.classList.remove('active'))
    button.classList.add('active')
  })
})

这段代码将为所有`tab-button`按钮添加点击事件。单击按钮时，它将从所有按钮中删除`active`类，并将其添加到当前单击的按钮上以表示选中状态。