如何使 javascript div 在加载时打开但在单击另一个 div 链接时隐藏？答案

【问题标题】：How do I make a javascript div open on load but hide when clicking on another div link?如何使 javascript div 在加载时打开但在单击另一个 div 链接时隐藏？
【发布时间】：2015-03-24 18:04:06
【问题描述】：

您可以在此处查看我的页面示例：https://dl.dropboxusercontent.com/u/24791073/TheAmericanWorker/index5.html。我正在尝试加载 MEC div，然后在单击顶部栏中的“最小值计划”等另一个链接时将其关闭。我试着让它“显示：块”而不是“显示：无”，但这不允许我关闭它。

这是我正在使用的 javascript 代码。

lastone = 'empty';

function showIt(lyr) {
    if (lastone != 'empty') lastone.style.display = 'none';
    lastone = document.getElementById(lyr);
    lastone.style.display = 'block';
};

function hideIt(lyr) {
    if (lastone != 'empty') lastone.style.display = 'block';
    lastone = document.getElementById(lyr);
    lastone.style.display = 'none';
}

以及链接代码示例：

<a href="JavaScript:"showonlyone";" onClick="showIt('MEC')" class="homeheader">MEC Plans 

<div id="MEC" style="display:none;">
    <p class=textwhheader>MEC Plans allow employers to offer qualifying coverage to their employees on a self-funded basis, which satisfies the individual mandate.
</p> 
<br>

    <a id='register'

                                class="btn red pure-button pure-button-primary"

                                style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;"

                                href='mecplans.html'

                                title="Click here to learn more.">

                                Learn More

                            </a>
                            </div>

【问题讨论】：

请整理好你的html代码，我相信你的代码干净整洁后你会自己发现问题的。
我清理了代码并查看了您的编辑。但是，这可以隐藏“display:block”，但是现在当我点击任何其他 div 时，它只隐藏“display:block”而没有“display:none”，这会导致其他 div保持开放。
我只编辑和整理了你的javascript代码。您的 html 包含严重错误。比如属性href="JavaScript:"showonlyone";"就完全无效了。
制作 lastone = document.getElementById('MEC'); 而不是 empty，因为您默认显示 MEC 之一。或者您可以在页面加载时致电showIt('MEC')。
这是我可以做到的一种方式。 jsfiddle.net/nqu46a34/9

标签： javascript jquery html css

【解决方案1】：

由于我的链接不起作用，希望这是您所追求的：

<ul>
    <li>
        <a id="first option" onClick="toggleDiv('myDiv1');">Option 1</a>
    </li>
    <li>
        <a id="first option" onClick="toggleDiv('myDiv2');">Option 2</a>
    </li>
</ul>
<div id="myDiv1">
    <span>Some data here</span>
</div>
<div id="myDiv2" style="display:none">
    <span>Div 2 data</span>
</div>

var currentActiveDiv = 'myDiv1';

toggleDiv = function(id){
    var domElement = document.getElementById(id);

    if (currentActiveDiv && currentActiveDiv !== id){
        var elementToHide = document.getElementById(currentActiveDiv);
        elementToHide.style.display = 'none';
    }

    domElement.style.display = 'block';
    currentActiveDiv = id;
};

问候，大卫。

【讨论】：

谢谢大卫。这有助于清理我的代码。现在我唯一需要帮助的是让 myDiv1 在页面加载时打开，然后在我单击任何其他 DIV 时隐藏。我可以将它标记为块而不是无，但无论我点击什么，它都会保持打开状态。想法？
使用文档加载更新了答案，我将 myDiv1 设置为可见。
不幸的是，这并没有导致 myDiv1 在最初打开页面时加载和打开。任何其他建议都会有所帮助。
您能否查看在您的页面加载时是否触发了代码？另一种选择是默认设置 myDiv1 style="display:block"。并在跟踪哪个 div 打开的变量中添加 div 的 id。查看更新的代码。
谢谢大家，我想我已经准备好了。