如何使CSS选项卡ui成为导航栏

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

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

.tab-nav li {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

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

.tab-content {
  display: none;
}

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

const tabNav = document.querySelector('.tab-nav');
const tabContent = document.querySelectorAll('.tab-content');

tabNav.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    const index = Array.from(tabNav.children).indexOf(e.target);
    
    // 切换选项卡的激活状态
    Array.from(tabNav.children).forEach(function(item) {
      item.classList.remove('active');
    });
    e.target.classList.add('active');
    
    // 切换对应内容的显示状态
    tabContent.forEach(function(item) {
      item.classList.remove('active');
    });
    tabContent[index].classList.add('active');
  }
});