时间戳

首页 > 解决方案 > 如何使用#anchor从url打开隐藏的div

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

问题描述

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

当我建立这个设置时，我似乎偶然发现了这个，但现在它不起作用了。我得到的最接近的是这篇文章：如何在 URL 上有哈希时打开隐藏的 div？

/*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。

标签： javascripthtml

解决方案

你很近。基本上，当您在 DOM 中选择事物时，您需要知道元素在那里。发生的情况是，您的 if 语句中围绕哈希的代码在 DOM 加载之前被执行，因此该元素不存在并返回 null。

这是我为解决这个问题所做的工作；只需将您的hashvar 和 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");
  }
});

推荐阅读