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

Question

我有一个包含员工简历网格的页面，当点击简历时，附加信息会以模式显示。当从另一个页面链接时，我希望能够显示特定员工的内容。我想使用纯 javascript 并在 url 中添加一个#anchor。

当我构建这个设置时，我似乎偶然发现了这个，但现在它不起作用了。我得到的最接近的来自这篇文章：How to open a hidden div when a hash is on the URL?

/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
    if (hash) {
        document.getElementById(hash).classList.add("bio-open");
    }

这是我的标记：

<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>

以下是页面上的脚本：

/* 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");
});

var speaker;

/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
    if (hash) {
        document.getElementById(hash).classList.add("bio-open");
    }

/* To open Speaker Bio Pop Up and prevent body/html scroll*/    
function speakerDetails(slug) {
    speaker = document.getElementById(slug);
    speaker.classList.add("bio-open");
    document.body.classList.add("no-overflow");
    document.documentElement.classList.add("no-overflow");
    document.documentElement.classList.remove("allow-overflow"); 
}

/*To Close Speaker Bio Pop Up When X close button is clicked and allow body/html scroll*/
function speakerDetailsClose(slug) {
    speaker.classList.remove("bio-open");
    document.body.classList.remove("no-overflow");
    document.documentElement.classList.remove("no-overflow");
    document.documentElement.classList.add("allow-overflow");
}

/*To Close Staff Bio Pop Up when clicked outside of the bio container and allow body/html scroll*/
window.onclick = function(event) {
    if(event.target == speaker) {
        speaker.classList.remove("bio-open");
        document.body.classList.remove("no-overflow");
        document.documentElement.classList.remove("no-overflow");
        document.documentElement.classList.add("allow-overflow");
    }
}

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

Answer 1

你已经接近了。基本上，当你在 DOM 中选择东西时，你需要知道元素在那里。发生的情况是，您的 if 语句中围绕哈希的代码在 DOM 加载之前被执行，因此该元素不存在并返回 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");
  }
});

Answer 2

我想通了！以为我会与 SO 世界的其他人分享，并感谢 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