javascript - 如何在不使用可见性函数的情况下隐藏元素

<分区>

要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist

关闭 9 年前。

我正在尝试编写一段代码，在单击按钮时为用户提供更多选项。例如，假设我有一个包含两个按钮的页面，一个是“搜索书籍”，另一个是“搜索事件”。如果用户点击“搜索书籍”按钮，在搜索按钮正下方的同一页面上，我希望出现不同的选项。我尝试使用 css visibility:hidden 函数并将其切换回 visibility:visible 使用 javascript 函数。它确实有效，但屏幕上有一个巨大的空间是为隐藏的元素保留的。主窗口按钮彼此相距很远。一侧是“搜索书籍”按钮，离它很远的地方是“搜索事件”按钮。

部分代码

</head>
<div class ="buttons">
<div id="visible">
    <input type="button"  value="Click To Search Faculty Members" onclick="swapform()" class="button">
    </div>
    </div>
    <div class = "form" id="theform" style="visibility: hidden">
    <form name = "type"  value="fm" action="http://localhost:8080/278Project/search.php" method="post"  onsubmit="return goto();">
    <table>
    <span style="box-shadow: 0 0 0 1px white inset;">
    <select name="type" >
            <option value="fm"> Faculty Members Search </option>
            </select>
            <tr><td><label class ="textClick">List all Faculty Members<input type="radio" name="select" value=1 ></label>
            <div>                       
            <label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label> 
            <input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
            <div>
            <label class="textClick">List By First Name <input type="radio" name="select" value=3 ></label>
            <input class="text" type="text" placeholder="Insert Name" name="list" >
            </div>
            <div>
            <label class="textClick">List By Last Name<input type="radio" name="select" value=4 ></label>
            <input class="text" type="text" placeholder="Insert Last Name" name="lname" >
            </div>
    </div>
    <!-- <input type="button" value="Hide" onclick="swapform2()" class="button"> !-->
    <input type="submit" value="Get Info">
    </table>
    </div>
</span>
</form>


<!-- Book Search !-->
<div class="buttons">
<div  id="bvisible">
    <input class ="button" type="button" value="Click To Search Books" onclick="swapbooks()" class="button">
    </div>
    </div>
    <div id="thebookform" style="visibility: hidden">
    <form name = "type" value="ch" action="http://localhost:8080/278Project/search.php" method="post"  onsubmit="return goto();">
    <table>
    <select name="type">
            <option value="ch"> Search for Books</option>
            </select>
            <tr><td><label class ="textClick">List all available Books<input type="radio" name="select" value=1 ></label>
            <div>                       
            <label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label> 
            <input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
            <div>
            <label class="textClick">List By Publishers name <input type="radio" name="select" value=3 ></label>
            <input class="text" type="text" placeholder="Insert Name" name="list" >
            </div>
            <div>
            <label class="textClick">List Books by year<input type="radio" name="select" value=4 ></label>
            <input class="text" type="text" placeholder="Insert Last Name" name="lname" >
            </div>
    </div>
    <input type="submit" value="Get Info">
    </table>

最佳答案

改用这个