仅用HTML与CSS实现点击<a>链接切换不同菜单表格的方法

完全可以仅用HTML+CSS实现你需要的点击链接切换菜单效果，不需要JavaScript。你之前用伪类实现失败，核心原因是误用了:active伪类——这个伪类只在鼠标按住元素的瞬间触发，松开就会失效，没法实现点击后持久切换显示的效果。

实现核心逻辑 #

用锚点链接搭配CSS :target伪类实现：点击锚点链接后，URL哈希值会变更，:target会自动匹配id和当前哈希值一致的元素，再配合CSS选择器控制对应菜单的显隐即可，完全能达到你要的切换效果。

具体实现步骤 #

1. 调整HTML结构 #

按如下规则组织你的导航和菜单表格DOM：

• 切换用的<a>标签href属性填#+对应表格的id
• 每个菜单表格设置全局唯一的id，和对应链接的href值匹配

参考结构示例：

<!-- 菜单切换导航栏 -->
<div class="menu-nav">
  <a href="#menu-brunch">早午餐菜单</a>
  <a href="#menu-dinner">晚餐菜单</a>
  <a href="#menu-drinks">饮品单</a>
</div>

<!-- 菜单表格区域 -->
<div class="table">
  <!-- 默认进入页面显示的菜单加active类 -->
  <table id="menu-brunch" class="menu-table active">
    <!-- 早午餐表格内容，保留你原来的表格结构即可 -->
  </table>
  <table id="menu-dinner" class="menu-table">
    <!-- 晚餐表格内容 -->
  </table>
  <table id="menu-drinks" class="menu-table">
    <!-- 饮品表格内容 -->
  </table>
</div>

2. 追加CSS代码 #

你之前写的表格样式全部可以保留，只需要额外追加以下控制显隐的CSS即可：

/* 所有菜单默认隐藏 */
.menu-table {
  display: none;
}

/* 默认激活的菜单、以及当前URL哈希匹配到的菜单显示 */
.menu-table.active,
.menu-table:target {
  display: table;
}

/* 选中其他菜单时，自动隐藏默认显示的第一个菜单 */
.table > .menu-table:target ~ .menu-table.active {
  display: none;
}

/* 可选：自定义导航样式和当前选中项高亮，如果需要选中态导航高亮，可以把导航移到.table容器内部，配合:target的兄弟选择器控制对应a标签样式即可 */
.menu-nav {
  text-align: center;
  margin-bottom: 24px;
}
.menu-nav a {
  margin: 0 12px;
  font-size: 1.2vw;
  color: white;
}

注意事项 #

• 所有菜单表格的id必须全局唯一，不能和页面其他元素id重复
• 不要依赖:visited伪类做切换控制，浏览器对:visited的样式支持有严格的隐私限制，只能修改部分颜色属性，没法控制元素显隐
• 如果需要切换加淡入淡出动画，给.menu-table加opacity和transition属性，配合visibility属性替代display: none即可实现

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