如何以编程方式创建操作选项卡项

<ul class="tab">
  <li class="tab-item active">选项卡1</li>
  <li class="tab-item">选项卡2</li>
  <li class="tab-item">选项卡3</li>
</ul>

<div class="tab-content">
  <div class="tab-pane active">选项卡1的内容</div>
  <div class="tab-pane">选项卡2的内容</div>
  <div class="tab-pane">选项卡3的内容</div>
</div>

.tab {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-item {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  cursor: pointer;
}

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

.tab-content {
  margin-top: 10px;
}

.tab-pane {
  display: none;
}

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

var tabItems = document.querySelectorAll('.tab-item');
var tabPanes = document.querySelectorAll('.tab-pane');

for (var i = 0; i < tabItems.length; i++) {
  tabItems[i].addEventListener('click', function() {
    // 移除所有选项卡的active类
    for (var j = 0; j < tabItems.length; j++) {
      tabItems[j].classList.remove('active');
      tabPanes[j].classList.remove('active');
    }
    
    // 添加当前选项卡的active类
    this.classList.add('active');
    tabPanes[this.dataset.index].classList.add('active');
  });
}