[英]Is it possible to link to the same page with different CSS conditions active, depending on which Link I clicked on?
I have three different Links that all lead to the same page.我有三个不同的链接,它们都指向同一个页面。 But I need the page to load with different CSS settings (depending on which link was clicked, certain elements should be hidden on the new page).
但我需要使用不同的 CSS 设置加载页面(取决于单击的链接,某些元素应隐藏在新页面上)。
Is that possible?那可能吗? Thank you!
谢谢!
Sure, you can use the :target
pseudo-class to do so.当然,您可以使用
:target
伪类来执行此操作。
The :target CSS pseudo-class represents a unique element ( the target element ) with an id matching the URL's fragment.
:target CSS 伪类表示一个唯一元素(目标元素),其 id 与 URL 的片段匹配。
With target
, you click a link, like page.html#some-condition
, and in your CSS
, listen for that condition.使用
target
,您单击一个链接,例如page.html#some-condition
,然后在您的CSS
中侦听该条件。 When the id
matches the hash in the address bar, you have a match and the target is met.当
id
与地址栏中的 hash 匹配时,您就有了匹配,并且达到了目标。
<a href="#some-condition">A link</a>
<div id="some-condition"></div>
#some-condition:target {
/* style appropriately */
}
Here's a quick demo.这是一个快速演示。 In this case, the links contain the
id
s, but as demonstrated above, you can structure things however you'd like.在这种情况下,链接包含
id
,但如上所示,您可以根据需要构建内容。
#red:target ~.result { background-color: red; } #blue:target ~.result { background-color: blue; } #green:target ~.result { background-color: green; }.result { width: 100px; height: 100px; display: inline-block; border: 1px solid; background-color: #fff; transition: 0.3s background-color; }
<a id="red" href="#red">Red</a> <a id="blue" href="#blue">Blue</a> <a id="green" href="#green">Green</a> <div class="result"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.