如何点击锚点链接时避免页面跳转？纯CSS解决方案

你可以通过将锚点目标设置为一个不占用页面空间且不会触发滚动的隐藏元素，再利用兄弟选择器控制内容的显示/隐藏，以此避免页面跳转。

修改后的代码实现： #

CSS：

/* 默认隐藏详情内容 */
.detailView {
  display: none;
}

/* 锚点目标元素：固定在视口左上角，无尺寸无内容，不影响页面布局 */
[id^="toggle-"] {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 锚点触发时，显示相邻的详情内容 */
[id^="toggle-"]:target + .detailView {
  display: block;
}

HTML：

<a href="#toggle-1">Show View1</a>
<span id="toggle-1"></span>
<p class="detailView">View1</p>

<a href="#toggle-2">Show View2</a>
<span id="toggle-2"></span>
<p class="detailView">View2</p>

原理说明： #

• 把原锚点目标从详情段落替换为空<span>，通过CSS让这个span固定在视口左上角且无任何尺寸，点击锚点时浏览器不会产生滚动跳转。
• 借助CSS相邻兄弟选择器(+)，当锚点目标被激活（:target）时，控制紧随其后的详情段落显示。

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