如何在URL无锚点时显示默认内容？

嘿，完全不用JavaScript就能搞定这个需求！纯CSS就可以实现默认内容和锚点区块的切换逻辑，我给你捋捋具体怎么做：

第一步：调整HTML结构 #

把所有锚点指向的区块放在前面，默认内容放在最后——这样我们可以用CSS的兄弟选择器来控制默认内容的显示状态：

<!-- 锚点区块 -->
<div id="a">这是#锚点a对应的内容，访问example.com/#a时显示</div>
<div id="b">这是#锚点b对应的内容，访问example.com/#b时显示</div>

<!-- 默认内容 -->
<div id="default">这是没有任何锚点时显示的默认内容</div>

第二步：编写CSS样式 #

通过:target伪类和兄弟选择器~来实现切换：

/* 默认状态：隐藏所有锚点区块，显示默认内容 */
#a, #b {
  display: none;
}
#default {
  display: block;
}

/* 当锚点a被激活时：显示a区块，隐藏默认内容 */
#a:target {
  display: block;
}
#a:target ~ #default {
  display: none;
}

/* 当锚点b被激活时：显示b区块，隐藏默认内容 */
#b:target {
  display: block;
}
#b:target ~ #default {
  display: none;
}

简化写法（适合多个锚点区块） #

如果你的锚点区块很多，给它们统一加个类（比如.anchor-block），可以大幅简化CSS代码：

<div id="a" class="anchor-block">锚点a内容</div>
<div id="b" class="anchor-block">锚点b内容</div>
<div id="c" class="anchor-block">锚点c内容</div>
<div id="default">默认内容</div>

.anchor-block {
  display: none;
}
#default {
  display: block;
}

/* 任何锚点区块被激活时，显示它并隐藏默认内容 */
.anchor-block:target {
  display: block;
}
.anchor-block:target ~ #default {
  display: none;
}

原理说明 #

• :target伪类只会匹配当前URL锚点对应的元素，当URL没有锚点时，没有元素会被:target选中，所以默认内容保持显示。
• 兄弟选择器~可以选中当前元素之后的所有同级元素，所以当某个锚点区块被:target匹配时，我们可以用它来隐藏后面的默认内容。

这样就完全不需要用JavaScript截取URL做判断啦，纯CSS就能完美实现需求！

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