點擊錨鏈接時如何避免跳轉

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