javascript - 使用 onclick 在其他 html 文件中显示隐藏的 div

Question

我使用 Javascript 和“onclick”来显示大型数据库中隐藏的 div，当我使用 onclick 时它显示为弹出窗口。它在同一个 html 文件中工作正常，但我无法在另一个 html 文件中获得 id openend。我该怎么做？

我使用这段 javascript 代码 (sh = show):

 var divState = {}; function sh(id) {
if (document.getElementById) {
    var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
 //close others
 for (var div in divState){
    if (divState[div] && div != id){
        document.getElementById(div).style.visibility = 'hidden';
        divState[div] = false;
    }
}
divid.style.visibility = (divid.style.visibility == 'visible' ? 'hidden' : 'visible'); } }

然后我用这个代码 (id=1) 调用该元素:

 <a class=w onclick="sh('1');">asdfasdf asdasdfds</a>

我试过了 <a onclick="window.location.href='../A/index.html?id=0174' ">但它不会“打开”或显示 id=0174，只会打开 A 目录中的 index.html。单击 E/index.html 中的某些元素时，如何使 A/index.html 中的 id 0174 可见？

非常感谢!

Answer 1

您可以使用 :target CSS 伪类，用于显示或隐藏 id 指定为 url 中的散列的元素。

例如:<a href="../A/index.html#0174">Link to div #0174 on other page</a>

.show-when-target {
  visibility: hidden;
}

.show-when-target:target {
  visibility: visible;
}

<div id="1" class="show-when-target">
  Hello from div 1!
</div>

<div id="2" class="show-when-target">
  Hello from div 2!
</div>

<div id="3" class="show-when-target">
  Hello from div 3!
</div>

<a href="#1">Show Div 1</a>
<a href="#2">Show Div 2</a>
<a href="#3">Show Div 3</a>