Javascript 如何使用#anchor从url打开隐藏的div

我有一个页面，其中有一个员工bios的网格，当单击bios时，其他信息以模式显示。我想能够显示的内容时，从另一个页面链接的具体工作人员。我想使用纯javascript并在url中添加一个#锚

当我建立这个装置的时候，我似乎在这个事故中绊倒了，但现在它不起作用了。我得到的最接近的信息来自以下帖子：

这是我的标记：

<div class="bio-tile">
  <div id="close" class="anchor"></div>
    <div class="tile-inner" onclick="speakerDetails('open')">
    //Thumbnail content here
    </div>
</div>

<div id="open" class="speaker-details">
  <div class="speaker-details-wrapper">         
    <span onclick="speakerDetailsClose('open')" class="speaker-close">×</span>
    //details content here
  </div>
</div>

---

我希望使用www.site.com/page#open url加载页面，以显示加载中的一个bio details div，然后能够关闭它以访问页面上的其他bios。

您已关闭。基本上，当您在DOM中选择东西时，您需要知道元素在那里。所发生的情况是，在加载DOM之前，围绕哈希的if语句中的代码被执行，因此元素不存在，并且返回null

以下是我为解决这个问题所做的工作；只需将

hash

var和if语句移动到DOMContentLoaded事件侦听器中

document.addEventListener('DOMContentLoaded', function(event) {
  //the DOMContentLoaded event occurred, which means the DOM is done loading.

  /*To open the details window when the ID # is used in the url*/
  var hash = window.location.hash.replace('#', '');

  if (hash) {
    // you don't have to do this extra save to a var, but it's clearer
    var elem = document.getElementById(hash);
    elem.classList.add("bio-open");
  }
});

---

我已经弄明白了！我想我会和世界其他地方分享，感谢bgaynor78让我朝着正确的方向前进

我使用了两次

document.addEventListener（'DOMContentLoaded'，function（event）{

，我不确定这是否完全是最佳实践

var speaker;
var hash = window.location.hash.replace('#', '');
var tag;

    /* To Allow Body and HTML scroll on load in class to be toggled */
window.addEventListener('DOMContentLoaded', (event) => {
    document.body.classList.add("allow-overflow");
    document.documentElement.classList.add("allow-overflow");
});


/*To open the details window when the ID # is used in the url*/
window.addEventListener('DOMContentLoaded', (event) => {

    if (hash) {
        tag = document.getElementById(hash);
        tag.classList.add("bio-open");
        document.body.classList.add("no-overflow");
        document.documentElement.classList.add("no-overflow");
        document.documentElement.classList.remove("allow-overflow"); 
    }
});

然后，我在脚本中添加了一些IF语句以引用以关闭窗口：

function speakerDetailsClose(slug) {
    if (hash) {
        tag.classList.remove("bio-open");
        speaker.classList.remove("bio-open");
        document.body.classList.remove("no-overflow");
        document.documentElement.classList.remove("no-overflow");
        document.documentElement.classList.add("allow-overflow");
    }

    else {
    // the rest of the script

---

谢谢您的回答，但我得到的结果与以前相同。我要显示的div正在显示，但我无法关闭它（通过单击div外部或单击关闭“x”.还有其他想法吗？因此，我不确定speakerDetail的调用位置，但它不是您提供的示例代码的一部分。它是您设置

扬声器

变量的唯一位置。因此，当您单击窗口时，

扬声器

未定义。

var speaker;
var hash = window.location.hash.replace('#', '');
var tag;

    /* To Allow Body and HTML scroll on load in class to be toggled */
window.addEventListener('DOMContentLoaded', (event) => {
    document.body.classList.add("allow-overflow");
    document.documentElement.classList.add("allow-overflow");
});


/*To open the details window when the ID # is used in the url*/
window.addEventListener('DOMContentLoaded', (event) => {

    if (hash) {
        tag = document.getElementById(hash);
        tag.classList.add("bio-open");
        document.body.classList.add("no-overflow");
        document.documentElement.classList.add("no-overflow");
        document.documentElement.classList.remove("allow-overflow"); 
    }
});

function speakerDetailsClose(slug) {
    if (hash) {
        tag.classList.remove("bio-open");
        speaker.classList.remove("bio-open");
        document.body.classList.remove("no-overflow");
        document.documentElement.classList.remove("no-overflow");
        document.documentElement.classList.add("allow-overflow");
    }

    else {
    // the rest of the script