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

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维护元素的页空间，即使该元素是invisible
• 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