求助：将radio/label导航标签转换为UL/LI结构并实现网页跳转

完整代码示例 #

HTML结构 #

<ul class="tab-nav">
  <li class="active">
    <a href="https://example.com/thing1">Some Thing</a>
  </li>
  <li>
    <a href="https://example.com/thing2">Some Thing 2</a>
  </li>
  <li>
    <a href="https://example.com/thing3">Some Thing 3</a>
  </li>
  <li>
    <a href="https://example.com/thing4">Some Thing 4</a>
  </li>
</ul>

CSS样式 #

/* 导航容器样式 */
.tab-nav {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: flex;
  gap: 0.5rem;
  background: #f0f0f0;
  padding: 0.5rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* 导航项基础样式 */
.tab-nav li {
  position: relative;
}

.tab-nav a {
  display: block;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  border-radius: 6px;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}

/* 选中状态文字颜色 */
.tab-nav li.active a {
  color: #fff;
}

/* 滑动背景块 */
.tab-nav::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: var(--active-pos, 0.5rem);
  width: var(--active-width, 120px);
  height: calc(100% - 1rem);
  background: #2563eb;
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* hover状态 */
.tab-nav a:hover {
  color: #2563eb;
}

JavaScript交互 #

const tabNav = document.querySelector('.tab-nav');
const tabItems = tabNav.querySelectorAll('li');

// 初始化滑动块位置
function initActiveTab() {
  const activeItem = tabNav.querySelector('.active');
  if (activeItem) {
    const link = activeItem.querySelector('a');
    const rect = link.getBoundingClientRect();
    const navRect = tabNav.getBoundingClientRect();
    tabNav.style.setProperty('--active-pos', `${rect.left - navRect.left}px`);
    tabNav.style.setProperty('--active-width', `${rect.width}px`);
  }
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initActiveTab);

// 点击导航项的处理逻辑
tabItems.forEach(item => {
  const link = item.querySelector('a');
  link.addEventListener('click', (e) => {
    // 移除所有激活状态
    tabItems.forEach(i => i.classList.remove('active'));
    // 标记当前项为激活状态
    item.classList.add('active');
    
    // 更新滑动块位置和宽度
    const rect = link.getBoundingClientRect();
    const navRect = tabNav.getBoundingClientRect();
    tabNav.style.setProperty('--active-pos', `${rect.left - navRect.left}px`);
    tabNav.style.setProperty('--active-width', `${rect.width}px`);
    
    // 延迟跳转，确保动画完成
    setTimeout(() => {
      window.location.href = link.href;
    }, 300);
    e.preventDefault();
  });
});

关键修改说明 #

1. 结构替换：完全用<ul>+<li>+<a>的熟悉结构替代原有的radio/label，每个<a>直接指定外部跳转地址。
2. 样式适配：
   • 保留原导航的视觉风格，将原选中状态的CSS选择器替换为.tab-nav li.active a，用于标记当前页面的导航项。
   • 用CSS变量--active-pos和--active-width控制滑动背景块的位置和宽度，替代原radio选中时的定位逻辑。
3. 交互优化：
   • 页面加载时自动初始化当前激活项的滑动块位置。
   • 点击导航时先播放滑动动画，再延迟跳转外部页面，保留原有的交互体验。
4. 当前页高亮：在对应页面的导航<li>上添加active类，即可实现页面加载时的高亮效果。

内容的提问来源于stack exchange，提问作者SkyHighStyle