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

debugcn 发表于 Dev

以色列

我有一个页面，其中包含一个员工简历网格，当点击 bios 时，附加信息会以模式显示。当从另一个页面链接时，我希望能够显示特定员工的内容。我想使用普通的 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。

以色列

我已经想通了！以为我会为 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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。