隐藏对象但仍有保留位置

Question

我正在尝试制作两个不同时显示的表格。第一个表格在页面打开时可见，但如果用户选择了，第一个表格应该被隐藏，第二个表格可能会替代它。因此，这是我的CSS：

#switcher {
    float: right;
    font-size: 12px;
}

#web_upload {
    visibility: hidden;
}

#local_upload {
    visibility: visible;
}

这里是HTML代码：

<form action="img_upload.php" id="local_upload" method="post" enctype="multipart/form-data">
    <center>
        <input type="file" name="file" id="file" /> 
        <br />
        <input type="image" name="submit" src="graphics/upload.png" />
    </center>
</form>
<form action="url_upload.php" id="web_upload" method="post" method="post">
    <center>
        <input type="text" name="url" id="url" /> 
        <br />
        <input type="image" name="submit" src="graphics/upload.png" />
    </center>
</form>

以下是我编写的JavaScript代码：

function showHide(id, other)
{
    if(document.getElementById(id)) {
        if(document.getElementById(id).style.visibility != "hidden") {
            document.getElementById(other).style.visibility = "hidden";
            document.getElementById(id).style.visibility = "visible";
        } else {
            document.getElementById(id).style.visibility = "hidden";
            document.getElementById(other).style.visibility = "visible";
        }
    } 
}

所以，我有三个问题：

• 第二个表单在页面上有一个预留位置，我不想要这个空白位置
• 第二个表单显示在那个预留位置上，而不是覆盖在第一个表单上
• 如果用户选择了其中一个选项并尝试选择其他选项，则没有任何反应

我该如何解决这些问题？

- Nathan Campos

---

你试过使用 display = "none" 吗？ - Matt Greer

每次想要查找元素都搜索一遍是不好的。可以使用引用来优化代码： var element = document.getElementById(id); element.style.vidibilit = "hidden"; - buschtoens

Answer 1

@Nathan Campos: 我会像这样结合 display 和 visibility --

CSS:

#web_upload {
    display: none;
    visibility: hidden;
}

#local_upload {
    display: inline;
    visibility: visible;
}

JavaScript:

function showHide(id, other)
{
    var id1 = document.getElementById(id);
    var id2 = document.getElementById(other);

    if (id1.style.display == "none") {
        id1.style.display    = "inline";
        id1.style.visibility = "visible";

        id2.style.display    = "none";
        id2.style.visibility = "hidden";
    } else if (id1.style.display == "" || id1.style.display == "inline") {
        id1.style.display    = "none";
        id1.style.visibility = "hidden";

        id2.style.display    = "inline";
        id2.style.visibility = "visible";
    }
}

- stealthyninja

---

这个功能很好，但是当页面打开时，第二个表单的空间就在那里。在我点击选项后，该空间被隐藏并且不再出现（这正是我想要的，但是在用户选择选项之前没有空间）。此外，用户可以在之后选择另一个选项 :) - Nathan Campos

现在唯一的问题是，当页面加载时，该空间仍然存在。 - Nathan Campos

@Nathan Campos：样式表可能已被缓存，但现在将样式内联添加到代码中可能会解决问题，例如：<form action="url_upload.php" id="web_upload" method="post" method="post" style="display: none; visibility: hidden"> - stealthyninja

Answer 2

display: none/block; 显示表单 / 完全隐藏并清除空间

visibility: hidden; 隐藏表单，但保留空间

- buschtoens

---

我尝试了 display: none，但现在它不会被隐藏，只有当 CSS 上的 visibility: hidden 才能隐藏，并且它仍然保留了空间。**:/ ** - Nathan Campos

请确保将“display：none”应用于正确的元素。只需为两个元素的两个属性“alert（）”即可。 - buschtoens

alert(id + ": " + document.getElementById(id).style.visibility + ", " + document.getElementById(id).style.display + "\n" + other + " : " + document.getElementById(other).style.visibility + ", " + document.getElementById(other).style.display); - buschtoens

Answer 3

CSS中的visibility属性在这里不是正确的选择。

'visibility'属性指定元素生成的盒子是否呈现。不可见的盒子仍会影响布局（将'display'属性设置为'none'可以完全禁止盒子生成）

参考：http://www.w3.org/TR/CSS21/visufx.html#visibility 相反，考虑使用CSS display属性-将display:none应用于元素将使其看起来就像不存在一样，它将是不可见的并且不会影响布局。

#switcher {
    float: right;
    font-size: 12px;
}

#web_upload {
    display:none;
}

#local_upload {
    display:block;
}

//

function showHide(id, other)
{
    switch (document.getElementById(id).style.display) {
        case 'block':
            document.getElementById(id).style.display = 'none';
            document.getElementById(other).style.display = 'block';

        case 'none':
            document.getElementById(id).style.display = 'block';
            document.getElementById(other).style.display = 'none';            
    }
}

- Jon Cram

---

第二个现在不会被隐藏了。 - Nathan Campos