当我在网站的某个部分(id链接)时，如何隐藏其他一切

Question

我真的不知道该怎么说。我正试图让它，当用户点击一个按钮时，网页上的所有内容都会被隐藏，除了部分内容

目前，我有这样的

function changeDisplay(){
document.getElementById("first").style.display = "none";
document.getElementById("second").style.display = "block";
}

.active {display: block;}
.inactive {display: none;}

<div id="first" class="active"> original content </div>
<div id="second" class="inactive"> different content here </div>
<a href="#second" onclick="changeDisplay()">link</a>

当您单击该按钮时，文本将消失，并由其他内容替换。请注意，我使用了一个指向id的链接。我引用了这张卡(我总是引用这张(。例如，单击"关于"时，网站将更改为https://..../#about。

当您重新加载网站时，它会显示关于页面，而不是主页。然而，使用我的解决方案(JS到样式显示(，它不起作用——如果重新加载页面，即使url链接到.../#second，也会显示第一个div。

那么，当我重新加载时(当url中有../#second时(，我如何让网站只显示第二个div(就像点击链接后一样(？

我更喜欢只使用HTML、CSS和JavaScript的答案。谢谢

Answer 1

您可以通过location.hash检查哈希，并执行如下检查：

function changeDisplay() {
document.getElementById("first").style.display = "none";
document.getElementById("second").style.display = "block";
}
location.hash = "#second"; //<-- debugging purposes only, do not include on your site
if(location.hash=="#second"){
changeDisplay();
}

.active {
display: block;
}
.inactive {
display: none;
}

<div id="first" class="active"> original content </div>
<div id="second" class="inactive"> different content here </div>
<a href="#second" onclick="changeDisplay()">link</a>