Question

我有一些div框，当你点击链接时，它会替换现有的框而不是在它下面堆叠一个新框。
最好向你展示而不是解释。

或者至少我会，但创建一个jsfiddle不会复制我在我的网页上看到的内容我的网页是内联网，所以我无法分享。

（当试图发帖时，我被要求附上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 activites”框将替换为“发送活动” 这个位在我的网站上可以正常使用我在小提琴中发布的内容。

然后，在'lam activities'中，如果你单击't45'，你应该在它下面有另一个框，但是在我的网站上't45'框取代了'lam activities'框，而不是在它下面堆叠另一个框。

我的目标是将't45'框堆叠在'lam activities'框下面。

通过阅读论坛上的其他主题，我知道你喜欢你的海报，详细说明他们尝试了什么...... 我对基于网络的所有事物的了解很少 4个星期前我从来没有创建过一个网站，我已经设法自学了足够的HTML和CSS来创建一个有效的网站，但是Javascript对我来说还是新手，因此我没有知识可以用js来制作它的工作原理我尝试将none更改为阻止，但这会创建比我想要的更多的框。

谢谢，克里斯蒂安

Answer 1

当您点击＆＃39; lam＆＃39;你得到一个下面的方框=＆＃39; lam activities＆＃39;。

然后，在＆＃39; lam活动＆＃39;如果你点击“t45＆＃39;你应该得到另一个   它下面的方框，但在我的网站上，＆＃39; t45＆＃39;框取代了＆＃39; lam   活动＆＃39;盒子而不是堆叠在它下面的另一个。

我的目标是拥有＆＃3945＆＃39;盒子堆放在＆＃39; lam下面   活动＆＃39;框。

总的来说，您遇到了2个问题，HTML无效，因为结束标记丢失且您的代码不正确，因此它不会显示预期的元素。

修复HTML

你的演示小提琴首先被打破，并没有证明你有问题。

如果lam1元素位于您仍隐藏lam1的{{1}}元素内，则无法显示com2，请在点击display: none后检查您的HTML ：

enter image description here

你最终得到错误的嵌套HTML的原因是由于缺少创建无效HTML的结束标记。

所有t45代码都缺少匹配的<a>结束代码。

所有主要</a>代码，例如div，<div id="com1"..>等，都缺少匹配的<div id="lam1"..>结束代码。

浏览器会尝试最佳猜测，在最合适的位置添加结束标记，因此最终会出现意外的HTML，例如兄弟元素会变为嵌套。

编辑：</div>不是必需的（我的不好），每个部分只缺少第3个</a>。我更新了小提琴并发布了代码以反映

DEMO - 添加缺少的结束标记会修复演示，现在会显示您遇到的问题。

修复代码

现在添加了缺少的结束标记，修复了现在可用的小提琴中的HTML，并显示了我们可以修复代码的问题。

您的第二个函数将始终隐藏</div>元素，然后显示任务元素，因此它将替换＆＃34;它。我假设你想要类似的功能，当你点击不同的＆＃34;任务＆＃34;时，任务元素被替换。

在这种情况下，您不能使用t45 ID，但需要保留一份单独的任务ID记录（或者您想要的任何内容）

showed

将其更改为以下内容，两个元素均可见： var taskId;

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

DEMO - 修复代码。

这是固定的HTML和完整性的代码，来自上面的小提琴。

HTML：

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

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

JavaScript的：

var shows =＆＃39; com1＆＃39 ;; var taskId;

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

Answer 2

让我们打破这个：

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

如果showed已设置且不等于函数中传递的新id，请获取ID为id的元素并将其设置为display:none; < / p>

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

获取ID为id的元素，并将其设置为display:block;

showed=id;

将showed变量设置为传递给函数的id的值。

基本上，该函数隐藏了前一个元素，然后显示了具有传递给函数的ID的元素。如果您不想隐藏前一个元素，您只需删除执行该操作的函数部分（if( showed && showed !== id ) { ... }语句块）

Javascript divs不堆叠

2 个答案:

修复HTML

修复代码