javascript - 链接到另一个页面并自动切换隐藏的 div

Question

我有一个带有 4 个按钮的页面 (...contacts.asp)。

单击按钮时，它会打开其关联的 div 部分并折叠其他 3 个部分。这个逻辑工作正常。

现在我想从另一个页面链接到此页面，但相关联的 div 部分按照 url 链接 http.. 中的 #tag 散列的指示打开。 ..contacts.asp#销售。

我的代码如下，我添加了 if 语句希望它能起作用，但它不起作用。

function showhide(id) {
    document.getElementById('Corporate').style.display = "none";
    document.getElementById('Outlets').style.display = "none";
    document.getElementById('Sales').style.display = "none";
    document.getElementById('Service').style.display = "none";

    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

if ( location.hash != 0 && location.hash == '#Sales' ){
    document.getElementById('Sales').style.display = "block";
}

Answer 1

相关代码可能执行得比较早。

更准确地说，这段代码:

if ( location.hash != 0 && location.hash == '#Sales' ) {
document.getElementById('Sales').style.display = "block";
}

执行后，'#Sales' DOM 元素可能还不存在，因为 DOM 尚未完全加载。所以执行这个不会发生任何事情。

这意味着代码必须在加载 DOM 后执行。要做到这一点，例如“DOMContentLoaded”事件。 (您也可以使用 'onload' 事件。)

作为解决方案，您应该在该事件处理程序中编写代码:

document.addEventListener("DOMContentLoaded", function() {
    // the if statement
});