Можно ли ссылаться на одну и ту же страницу с различными активными условиями CSS, в зависимости от того, на какую ссылку я нажал?

Question

У меня есть три разных ссылки, которые ведут на одну и ту же страницу. Но мне нужно, чтобы страница загружалась с различными настройками CSS (в зависимости от того, какая ссылка была нажата, определенные элементы должны быть скрыты на новой странице).

Возможно ли это? Спасибо!

Answer 1

Конечно, вы можете использовать псевдокласс :target.

От MDN :

: target CSS псевдокласс представляет уникальный элемент ( целевой элемент ) с идентификатором, совпадающим с фрагментом URL.

С target вы нажимаете ссылку, как page.html#some-condition, и в своем CSS слушайте это условие. Когда id соответствует значению ha sh в адресной строке, у вас есть совпадение и цель достигнута.

<a href="#some-condition">A link</a>
<div id="some-condition"></div>

#some-condition:target {
  /* style appropriately */
}

Вот короткая демонстрация. В этом случае ссылки содержат id s, но, как показано выше, вы можете структурировать вещи так, как вам нравится.

#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>

jsFiddle