как скрыть / показать элемент в соответствии с параметром url

Question

У меня есть 4 параметра URL, например,

http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#like
http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#comment
http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#share
http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#save

и 4 блока, например html

<div id='like' class='hide'></div>
<div id='comment' class='hide'></div>
<div id='share' class='hide'></div>
<div id='save' class='hide'></div>

и css

.hide{
    display:none;
    }

как мне показать элементы при поиске параметра url, например, если я ищу

http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#like

, div с id='like теперь должен быть видим

то, что я пробовал Я попытался показать элементы при нажатии кнопки, и я успешно использовал classList.toggle('hide'), но как мне добиться того же с изменениями в URL-адресе. Было бы лучше, если бы для classList было установлено cc для URL-адреса, например, когда в URL-адресе есть #like, элемент с идентификатором like больше не должен содержать класс hide. другие ответы тоже принимаются, спасибо.

Answer 1

Нет JavaScript не требуется. Используйте селектор CSS :target, например:

#like.hide:target {display:block;}

.hide {
  display: none;
}

#like.hide:target,
#comment.hide:target,
#share.hide:target,
#save.hide:target {
  display: block;
}

<div id='like' class='hide'>like</div>
<div id='comment' class='hide'>comment</div>
<div id='share' class='hide'>share</div>
<div id='save' class='hide'>save</div>

<a href="#like">like</a>
<a href="#comment">comment</a>
<a href="#share">share</a>
<a href="#save">save</a>