CSS :target pseudo-class is not applied after click on link

我正在使用 Rails5(带有涡轮链接)

HTML 标记:

<a href="/post/slug#target1">Target1</a>
<a href="/post/slug#target2">Target1</a>
...
<p id="target1">Content1</p>
<p id="target2">Content2</p>

CSS:

p:target {
  background-color: red;
}

问题是 :target 伪类仅在页面刷新后应用。单击链接时不应用样式。

我几乎可以肯定，这种行为是由涡轮链接引起的。如何解决这个问题？

最佳答案

我在写这个问题时找到了解决方案。

为了使事情顺利进行，我们需要向此类链接添加数据属性，如下所示:

<a href="/post/slug#target2" data-turbolinks="false">Target1</a>

此属性在每个链接的基础上禁用涡轮链接。

关于CSS :target pseudo-class is not applied after click on link，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44409934/