点击锚点链接时如何避免跳转

Question

我想在不使用JavaScript的情况下使用纯CSS显示/隐藏内容。我找到了这个解决方案。

当我点击链接时，它会跳到页面中。我需要纯CSS的解决方案，如何阻止它跳转？

p[id^="detailView-"] {
display: none;
}
p[id^="detailView-"]:target {
display: block;
}

<a href="#detailView-1">Show View1</a>
<p id="detailView-1">View1</p>
<a href="#detailView-2">Show View2</a>
<p id="detailView-2">View2</p>

Answer 1

只需排列html，使锚标签位于顶部，就像一样

p[id^="detailView-"] {
display: none;
}
p[id^="detailView-"]:target {
display: block;
}

<a href="#detailView-1">Show View1</a>
<a href="#detailView-2">Show View2</a>
<p id="detailView-1">View1</p>
<p id="detailView-2">View2</p>

Answer 2

在这种情况下，而不是在以下选项之间切换：

• display: none
• display: block

您可以在以下选项之间切换：

• visibility: hidden
• visibility: visible

---

这两个属性之间的区别在于：

• visibility为元素保留页面空间，即使该元素不可见
• display: none实际上会从页面中移除元素并折叠它所占用的空间

---

工作示例：

p[id^="detailView-"] {
visibility: hidden;
}
p[id^="detailView-"]:target {
visibility: visible;
}

<a href="#detailView-1">Show View1</a>
<p id="detailView-1">View1</p>
<a href="#detailView-2">Show View2</a>
<p id="detailView-2">View2</p>

---

进一步阅读：

• https://developer.mozilla.org/en-US/docs/Web/CSS/visibility