页面加载时JavaScript / HTML div崩溃了吗？

Question

我需要在页面加载时折叠可折叠div的帮助。

我正在使用以下JavaScript代码：

<script type="text/javascript">
    function switchMenu(obj) {
        var el = document.getElementById(obj);
        if ( el.style.display != "none" ) {
            el.style.display = 'none';
        }
        else {
            el.style.display = '';
        }
    }
    document.getElementById('aboutme').style.display = 'none';
</script>

点击<a ...>about me</a>时，折叠HTML div id =“ aboutme”：

<div class="container">
    <a href="#" onclick="switchMenu('aboutme');">about me</a>
    <div id="aboutme">
        sample text to be expanded and collapsed
    </div>
</div>

我无法在页面加载时关闭页面以关闭div#aboutme 。

我希望此页面在div折叠的情况下加载。

我以为是JS线

document.getElementById('aboutme').style.display = 'none';

应该可以解决问题，但事实并非如此。 我究竟做错了什么？

谢谢你的帮助。

Answer 1

如果您希望div加载时折叠，只需编写以下内容

 <div id="aboutme" style="display:none">
        sample text to be expanded and collapsed
    </div>

这样可以解决问题。 但是，如果您仍然对JavaScript解决方案感兴趣，请继续阅读。
如您所说， I can't get the page to close my div#aboutme on page load问题是您未使用“ onload”事件。 只需将行document.getElementById('aboutme').style.display = 'none'; 在您身体的onload属性中。

<body onload="document.getElementById('aboutme').style.display = 'none';">
...
</body>

并且您应该使用JavaScript查看结果。 我建议您改用“样式”方法。 好多了。

Answer 2

究竟如何使JS在窗口加载时运行？ 它可能只是在呈现页面之前运行

单击链接有效吗？ 如果确实如此，那将证明问题仅仅是加载顺序

最简单的解决方案是将代码放在HTML文件的最后，紧接</body>标记之前。 下面的代码更加通用，可以放在任何地方。 请注意，要切换回链接，我将显示设置为“内联”（或阻止，即之前的显示-您可能需要将其保存到变量中以确保确定）

<script type="text/javascript">
function switchMenu(id) {
    var el = document.getElementById(id);
    if ( el.style.display != "none" ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = 'inline'; //or block - i.e. whatever it is rendered by
    }
}

//add to the window onload event
if( window.addEventListener ){
    window.addEventListener( 'load', function(){ switchMenu('aboutme')}, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", function(){ switchMenu('aboutme') } );
}
</script>

页面加载时JavaScript / HTML div崩溃了吗？

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-01-01 12:41:07

解决方案2
1 2012-01-01 12:59:47

页面加载时JavaScript / HTML div崩溃了吗？

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-01-01 12:41:07

解决方案2 1 2012-01-01 12:59:47

解决方案1
2 已采纳 2012-01-01 12:41:07

解决方案2
1 2012-01-01 12:59:47