原生h5编写一个移动端底部切换两个背景颜色的tab

根据您的描述，您想要实现一个移动端底部切换两个背景颜色的tab，这可以通过以下步骤来实现：

1. 在HTML中创建底部tab栏的结构，包括两个选项卡，每个选项卡都有一个背景颜色。
2. 使用CSS样式来设置选项卡的大小，颜色和位置，以及设置选中选项卡时的样式。
3. 使用JavaScript来实现选项卡的切换功能，当用户点击一个选项卡时，切换到该选项卡并更改其背景颜色，同时将另一个选项卡的背景颜色更改为默认颜色。

以下是一个简单的示例代码：

HTML:

<div class="tab-container">
  <div class="tab-item active" id="tab1">Tab 1</div>
  <div class="tab-item" id="tab2">Tab 2</div>
</div>

CSS:

.tab-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
}

.tab-item {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.tab-item.active {
  background-color: #ff9900;
  color: #fff;
}

JavaScript:

var tab1 = document.getElementById('tab1');
var tab2 = document.getElementById('tab2');

tab1.addEventListener('click', function() {
  tab1.classList.add('active');
  tab2.classList.remove('active');
});

tab2.addEventListener('click', function() {
  tab2.classList.add('active');
  tab1.classList.remove('active');
});

当用户点击选项卡时，JavaScript代码将添加/删除“active”类，从而更改选项卡的背景颜色和文字颜色。