如何在加载时打开javascript div，但在点击另一个div链接时隐藏？

You can see my page sample here: https://dl.dropboxusercontent.com/u/24791073/TheAmericanWorker/index5.html. I am trying to load the MEC div, then close it when clicking on another link such as Minimum Value Plans in the top bar. I tried just having it "display:block" instead of "display:none", but that doesn't allow me to close it.

您可以在此处查看我的页面示例：https：//dl.dropboxusercontent.com/u/24791073/TheAmericanWorker/index5.html。我正在尝试加载MEC div，然后在单击顶部栏中的其他链接（例如最小值计划）时将其关闭。我试着把它显示为“display：block”而不是“display：none”，但这不允许我关闭它。

Here is the javascript code up top I am using.

这是我正在使用的*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';
}

and a sample of the link code:

以及链接代码的示例：

<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>

1 个解决方案

#1

Since my link was not working, hope this is what you were after:

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

<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;
};

Regards, David.

问候，大卫。

#1