4

我正在尝试制作两个不同时显示的表单。第一个在页面打开时保持可见，但如果用户选择，第一个应该被隐藏，第二个可能会取而代之。所以这是我的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";
        }
    } 
}

所以，我遇到了三个问题：

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

我该如何解决这个问题？

4

3 回答 3

4

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

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

于 2011-04-03T20:52:46.470 回答
4

@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";
    }
}
于 2011-04-03T21:25:48.520 回答
3

CSSvisibility属性在这里不是正确的选择。

'visibility' 属性指定是否呈现由元素生成的框。不可见的盒子仍然会影响布局（将“显示”属性设置为“无”以完全抑制盒子生成）

参考：http ://www.w3.org/TR/CSS21/visufx.html#visibility

考虑改为 CSSdisplay属性 -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';            
    }
}
于 2011-04-03T20:59:40.220 回答