如何切换选项卡导航

<ul class="tab-nav">
  <li id="tab1" class="active">选项卡1</li>
  <li id="tab2">选项卡2</li>
  <li id="tab3">选项卡3</li>
</ul>

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

.tab-nav li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}

.tab-nav li.active {
  background-color: #555;
}

// 获取选项卡菜单和内容元素
var tabs = document.querySelectorAll('.tab-nav li');
var contents = document.querySelectorAll('.tab-content');

// 绑定点击事件
tabs.forEach(function(tab) {
  tab.addEventListener('click', function() {
    // 切换选项卡的激活状态
    tabs.forEach(function(tab) {
      tab.classList.remove('active');
    });
    this.classList.add('active');

    // 切换内容的显示和隐藏
    var tabId = this.getAttribute('id');
    contents.forEach(function(content) {
      content.style.display = 'none';
    });
    document.getElementById(tabId + '-content').style.display = 'block';
  });
});