javascript - JavaScript div不堆叠

我有一些DIV框，当你点击一个链接时，它替换了一个现有的框，而不是在它下面堆叠一个新的框。
最好是给你看而不是解释。
或者至少我会，但是创建jsfiddle并不能复制我在网页上看到的内容。
我的网页是内联网，所以我不能共享。
这是小提琴：http://jsfiddle.net/GR6pu/
（当我试图发帖时，我被要求在jsfiddle.net链接中附带一些代码。
不太确定需要什么，所以我将发布此：）

var showed = 'com1';
function com(id) {
    if (showed && showed !== id) {
        document.getElementById(showed).style.display = 'none';
    }
    document.getElementById(id).style.display = 'block';
    showed = id;
}

希望发生的是：
你从社区开始。
当你点击“lam”时，你会看到下面的一个框＝“lam activities”。
如果随后单击“分派”，则此“lam活动”框将替换为“分派活动”。
这一点在我的网站上工作的很好，我已经张贴在小提琴。
然后，在“lam activities”中，如果您单击“t45”，您应该会在其下方看到另一个框，但在我的网站上，“t45”框将替换“lam activities”框，而不是在其下方堆叠另一个框。
我的目标是把“t45”盒子放在“lam活动”盒子下面。
通过阅读论坛上的其他帖子，我知道你喜欢你的海报来详细说明他们尝试过什么。。。
我对所有基于网络的东西的了解很少。
4周前，我从未创建过一个网站，我已经学会了足够多的HTML和CSS来创建一个有效的网站，但是Javascript对我来说还是一个新事物，因此我没有足够的知识去摆弄js来让它工作。
我尝试将“无”更改为“阻止”，但这会创建比我所希望的更多的框。
谢谢，克里斯蒂安

最佳答案

当你点击“lam”时，你会看到下面的一个框＝“lam activities”。
然后，在“lam activities”中，如果单击“t45”，您应该获得另一个
下面的方框，但在我的网站上“t45”框取代了“lam”
“活动”框，而不是在它下面堆叠另一个。
我的目标是把“t45”盒子放在“lam”下面
“活动”框。
总的来说，有两个问题，HTML无效，因为缺少结束标记，代码不正确，因此它不会显示预期的元素。
固定HTML
你的演示小提琴一开始就坏了，不能演示你的问题。
如果lam1元素位于仍隐藏的lam1元素中，则无法显示com2，请在单击display: none后检查HTML：
最后出现这样不正确的嵌套HTML的原因是缺少导致无效HTML的结束标记。
所有t45标记都缺少匹配的<a>结束标记。
所有主</a>标记，如div，<div id="com1"..>等。。缺少匹配的结束标记。
浏览器会尽可能地猜测，在最合适的地方添加结束标记，因此可能会出现意外的HTML，例如兄弟元素会被嵌套。
编辑：不需要<div id="lam1"..>（我的错），每个部分只缺少第三个</div>。我更新了小提琴并发布了代码来反映
DEMO-添加缺少的结束标记修复了演示，现在显示了您遇到的问题。
固定代码
现在，丢失的结束标签被添加到固定的HTML中，它现在起作用并显示问题，我们可以修复你的代码。
第二个函数总是隐藏</a>元素，然后显示task元素，因此它“替换”了它。我假设您需要类似的功能，即在单击不同的“任务”时替换task元素。
在这种情况下，您不能使用</div>id，但需要保留任务id的单独记录（或您想调用它的内容）

function lam(id) {
    // this removes the t45 element you want to keep
    // I'm assuming you want to track clicked lams separately
    if (showed && showed !== id) {
        document.getElementById(showed).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
    showed = id;
}

将其更改为以下内容，并且两个元素都可见：
变量taskId；

function lam(id) {
    if (taskId && taskId !== id) {
        document.getElementById(taskId).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
    taskId = id;
}

DEMO -固定代码。
这里是固定的HTML和代码，从上面的小提琴完整性。
HTML格式：

<div class='whitebox'>
    <div class='subheader'>community</div>
    <div class='links'>
        <a onclick="com('com1');"><div class='boxlink'>LAM</div>
        <a onclick="com('com2');"><div class='boxlink'>DISPATCH</div>
        <a onclick="com('com3');"><div class='boxlink'>PLANNING</div>
    </div>
</div> <!-- closing </div> was missing -->

<div id="com1" style="display:none">
    <div class='whitebox'>
        <div class='subheader'>lam activities</div>
        <div class='links'>
            <a onclick="lam('lam1');"><div class='boxlink'>T45</div>
            <a onclick="lam('lam2');"><div class='boxlink'>SYNC</div>
            <a onclick="lam('lam3');"><div class='boxlink'>ESSS</div>
            <a onclick="lam('lam4');"><div class='boxlink'>IND</div>
        </div>
    </div>
</div> <!-- closing </div> was missing -->

<div id="com2" style="display:none">
    <div class='whitebox'>
        <div class='subheader'>dispatch activities</div>
        <div class='links'>
            <a onclick="lam('lam2');"><div class='boxlink'>SYNC</div>
            <a onclick="lam('lam3');"><div class='boxlink'>ESSS</div>
        </div>
    </div>
</div> <!-- closing </div> was missing -->

<div id="lam1" style="display:none">
    <div class='whitebox'>
        <div class='subheader'>t45 tasks</div>
        <div class='links'>
            <a onclick="t45('t451');"><div class='boxlink'>REMOVAL</div>
            <a onclick="t45('t452');"><div class='boxlink'>ADJUST</div>
            <a onclick="t45('t453');"><div class='boxlink'>RECEIPT</div>
        </div>
    </div>
</div> <!-- closing </div> was missing -->

<div id="lam2" style="display:none">
    <div class='whitebox'>
        <div class='subheader'>sync tasks</div>
        <div class='links'>
            <a onclick="t45('t451');"><div class='boxlink'>emea</div>
            <a onclick="t45('t452');"><div class='boxlink'>namer</div>
            <a onclick="t45('t453');"><div class='boxlink'>s asia</div>
            <a onclick="t45('t454');"><div class='boxlink'>n asia</div>
        </div>
    </div>
</div> <!-- closing </div> was missing -->

JavaScript代码：
变量显示为“com1”；
变量taskId；

function com(id) {
    if (showed && showed !== id) {
        document.getElementById(showed).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
    showed = id;
}

function lam(id) {
    if (taskId && taskId !== id) {
        document.getElementById(taskId).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
    taskId = id;
}