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

所以，我有三个问题：

第二个表单在页面上有一个保留位置，我不想要这个空位
第二种形式是在保留的地方展示，而不是在第一种形式上展示
如果用户选择其中一个选项并尝试在没有任何反应后选择其他选项

我如何解决这个问题？

Answer 1

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

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

Answer 2

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

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

隐藏的对象但仍保留一个位置

3 个答案: