基于锚点的内容显隐实现（默认显示首个）——纯HTML/CSS方案

嘿，这里有个纯HTML+CSS的方案，能完美实现基于锚点的内容显示/隐藏，并且默认展示第一个内容块，完全不需要JavaScript：

CSS 代码 #

/* 为不同内容块设置背景色方便区分 */
#red { background: red; }
#blue { background: blue; }
#green { background: green; }

/* 内容块基础样式：默认隐藏 */
.box {
  width: 200px;
  height: 200px;
  display: none;
}

/* 被锚点定位到的内容块切换为显示状态 */
.box:target {
  display: block;
}

/* 让第一个内容块默认显示 */
.box:first-of-type {
  display: block;
}

HTML 代码 #

<a href="#red">Red item</a> | <a href="#blue">Blue item</a> | <a href="#green">Green item</a>

<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>

简单说下原理： #

• 所有.box元素默认通过display: none隐藏，我们用:first-of-type伪类单独让第一个内容块保持显示状态
• 点击锚点链接时，浏览器会定位到对应ID的元素，此时:target伪类会匹配这个被选中的元素，把它的display改成block显示出来
• 当切换到其他锚点时，之前的目标元素会失去:target的匹配，重新被隐藏，新的目标元素则会显示

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