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

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