如何用单个HTML结合CSS实现多标签页 支持可选是否借助JavaScript

方案一：纯CSS无JS实现（无依赖） #

该方案完全不依赖JavaScript，仅通过CSS兄弟选择器控制标签显示逻辑，无需手动配置默认显示样式，仅需给默认选中的单选按钮添加checked属性即可。
完整代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>纯CSS多标签页</title>
  <style>
    /* 隐藏原生单选按钮 */
    .tab-radio {
      display: none;
    }
    ul {
      list-style: none;
      padding: 0;
      margin: 0 0 16px 0;
      display: flex;
      gap: 20px;
    }
    label {
      padding: 8px 16px;
      border: 1px solid #ccc;
      border-radius: 4px 4px 0 0;
      cursor: pointer;
    }
    /* 选中态标签样式 */
    #tab1-radio:checked ~ nav label[for="tab1-radio"],
    #tab2-radio:checked ~ nav label[for="tab2-radio"],
    #tab3-radio:checked ~ nav label[for="tab3-radio"] {
      background: #f0f0f0;
      border-bottom-color: #f0f0f0;
      color: red;
    }
    /* 统一隐藏所有标签内容 */
    .tab-content {
      display: none;
      padding: 16px;
      border: 1px solid #ccc;
      border-radius: 0 4px 4px 4px;
    }
    /* 选中对应单选按钮时展示对应内容 */
    #tab1-radio:checked ~ .tab-content#tab1,
    #tab2-radio:checked ~ .tab-content#tab2,
    #tab3-radio:checked ~ .tab-content#tab3 {
      display: block;
    }
  </style>
</head>
<body>
  <!-- 所有单选按钮放在最外层，与导航、内容区域同级 -->
  <input type="radio" name="tabs" id="tab1-radio" class="tab-radio" checked>
  <input type="radio" name="tabs" id="tab2-radio" class="tab-radio">
  <input type="radio" name="tabs" id="tab3-radio" class="tab-radio">

  <nav>
    <ul>
      <li><label for="tab1-radio">标签1</label></li>
      <li><label for="tab2-radio">标签2</label></li>
      <li><label for="tab3-radio">标签3</label></li>
    </ul>
  </nav>

  <div class="tab-content" id="tab1">标签1的内容</div>
  <div class="tab-content" id="tab2">标签2的内容</div>
  <div class="tab-content" id="tab3">标签3的内容</div>
</body>
</html>

核心优势：

• 完全无JS依赖，兼容性覆盖绝大多数现代浏览器
• 不需要手动维护默认显示的单独CSS规则
• 新增标签仅需同步新增单选按钮、label、内容容器，补充对应CSS选择器即可

方案二：极简JS实现（低维护成本） #

如果可以接受少量JS代码，该方案维护成本更低，新增标签时不需要修改CSS和JS逻辑，仅需新增对应DOM结构即可自动适配。
完整代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>极简JS多标签页</title>
  <style>
    ul {
      list-style: none;
      padding: 0;
      margin: 0 0 16px 0;
      display: flex;
      gap: 20px;
    }
    .tab-radio {
      display: none;
    }
    label {
      padding: 8px 16px;
      border: 1px solid #ccc;
      border-radius: 4px 4px 0 0;
      cursor: pointer;
    }
    input:checked + label {
      background: #f0f0f0;
      border-bottom-color: #f0f0f0;
      color: red;
    }
    .tab-content {
      display: none;
      padding: 16px;
      border: 1px solid #ccc;
      border-radius: 0 4px 4px 4px;
    }
  </style>
</head>
<body>
<nav>
  <ul class="site-nav">
    <li>
      <input id="tab1-radio" value="tab1" type="radio" name="nav-tabs" class="tab-radio" checked>
      <label for="tab1-radio">标签1</label>
    </li>
    <li>
      <input id="tab2-radio" value="tab2" type="radio" name="nav-tabs" class="tab-radio">
      <label for="tab2-radio">标签2</label>
    </li>
    <li>
      <input id="tab3-radio" value="tab3" type="radio" name="nav-tabs" class="tab-radio">
      <label for="tab3-radio">标签3</label>
    </li>
  </ul>
</nav>
<div id="tab1" class="tab-content">标签1内容</div>
<div id="tab2" class="tab-content">标签2内容</div>
<div id="tab3" class="tab-content">标签3内容</div>

<script>
// 初始化：显示默认选中的标签内容
const defaultTab = document.querySelector('input[name="nav-tabs"]:checked').value;
document.getElementById(defaultTab).style.display = 'block';

// 绑定切换事件，自动适配所有标签
document.querySelectorAll('input[name="nav-tabs"]').forEach(radio => {
  radio.addEventListener('change', () => {
    document.querySelectorAll('.tab-content').forEach(tab => tab.style.display = 'none');
    document.getElementById(radio.value).style.display = 'block';
  })
})
</script>
</body>
</html>

核心优势：

• 无需编写大量重复CSS选择器
• 自动识别默认选中的标签并展示内容，无需手动配置
• 新增标签仅需添加HTML结构即可，无需修改逻辑代码

补充：锚点hash方案默认显示修复 #

如果倾向于使用锚点方案，仅需添加一行JS即可解决无hash时无内容的问题：

if (!location.hash) location.hash = '#one'; // #one替换为你默认展示的标签ID

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