如何在URL中使用＃顯示和隱藏某些html元素

Question

我正在嘗試創建一個包含一些隱藏div的網站，如果URL具有#SOMETHING（ http://website.com/#SOMETHING ）以顯示具有ID SOMETHING（ <div id="SOMETHING">...</div> ），可以嗎？ （我想做的是，如果URL具有#example，則某些腳本將從ID為＃（示例）的ID的div中刪除hiddenfile類）

編碼：

<html>
<head>
<style>
.hiddenfile {
   opacity: 0;
   visibility: hidden;
   display: none;
}
</style>
</head>
<body>
<div id="SOMETHING" class="SOMETHING hiddenfile" name="SOMETHING">...</div>
<div id="SOMETHING2" class="SOMETHING2 hiddenfile" name="SOMETHING2">...</div>
<div id="SOMETHING3" class="SOMETHING3 hiddenfile" name="SOMETHING3">...</div>
</body>
</html>

Answer 1

您可以使用window.location.hash ：

selector = document.querySelector(window.location.hash)
selector.style.display = 'block'
selector.style.opacity = 1
selector.style.visibility = 'visible'

Answer 2

@BhojendraRauniyar的答案有效，但是到目前為止，它只能處理其他頁面上鏈接到您頁面的情況。

如果在頁面上單擊錨點鏈接時想要相同的行為，則需要實現onhashchange處理程序並處理隱藏的顯示元素。

請注意，所有特殊元素的類名均已更改。

 function checkSomething(event) { [...document.querySelectorAll(".SOMETHING")].forEach( (div) => // hide or show all "SOMETHING" elements as necessary div.classList[(div.id == window.location.hash.substring(1)) ? "remove" : "add"]("hiddenfile") ) } function init() { window.onhashchange = checkSomething; // need to check if an external link was to an anchor checkSomething(); } document.addEventListener("DOMContentLoaded", init)

 .hiddenfile { opacity: 0; visibility: hidden; display: none; }

 <body> <div> <a href="#SOMETHING">Test for 1st div</a> <a href="#SOMETHING2">Test for 2nd div</a> <a href="#SOMETHING3">Test for 3rd div</a></div> <div id="SOMETHING" class="SOMETHING hiddenfile" name="SOMETHING">SOMETHING</div> <div id="SOMETHING2" class="SOMETHING hiddenfile" name="SOMETHING2">SOMETHING2</div> <div id="SOMETHING3" class="SOMETHING hiddenfile" name="SOMETHING3">SOMETHING3</div> </body> </style>

如何在URL中使用＃顯示和隱藏某些html元素

問題描述

2 個解決方案

解決方案1
1 2019-06-08 19:43:16

解決方案2
0 已采納 2019-06-08 21:06:38

如何在URL中使用＃顯示和隱藏某些html元素

問題描述

2 個解決方案

解決方案1 1 2019-06-08 19:43:16

解決方案2 0 已采納 2019-06-08 21:06:38

解決方案1
1 2019-06-08 19:43:16

解決方案2
0 已采納 2019-06-08 21:06:38