CSS :目标伪 class 在点击 link 后没有应用
CSS :target pseudo-class is not applied after click on link
我正在使用 Rails5(带有 turbolinks)
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 pseudo-class 仅在页面刷新后应用。单击链接时不应用样式。
我几乎可以肯定,这种行为是由 turbolinks 引起的。如何解决这个问题?
我在写这个问题时找到了解决方案。
为了让事情顺利进行,我们需要给这样的link添加数据属性,如下:
<a href="/post/slug#target2" data-turbolinks="false">Target1</a>
此属性在每个 link 基础上禁用 turbolinks。
此处有更多详细信息:Disabling Turbolinks on Specific Links
我正在使用 Rails5(带有 turbolinks)
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 pseudo-class 仅在页面刷新后应用。单击链接时不应用样式。
我几乎可以肯定,这种行为是由 turbolinks 引起的。如何解决这个问题?
我在写这个问题时找到了解决方案。
为了让事情顺利进行,我们需要给这样的link添加数据属性,如下:
<a href="/post/slug#target2" data-turbolinks="false">Target1</a>
此属性在每个 link 基础上禁用 turbolinks。
此处有更多详细信息:Disabling Turbolinks on Specific Links