如何根据 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 个 div，例如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

id='like的 div 现在应该可见

我试过什么我试图取消隐藏按钮单击时的元素，并且我成功使用classList.toggle('hide')但是如何通过 url 中的更改来实现相同的目标。 我最好将classList设置为url，例如当#like中有#like时，id为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>

Answer 2

JavaScript 方法如下：

like.style.display = "none";

如果这是您喜欢的，您可以实现 if 语句来触发该行。