Question

我正在尝试编写一个代码，只要单击一个按钮，就会为用户提供更多选项。例如说我有一个带有两个按钮的页面，一个“搜索书籍”，另一个“搜索事件”。如果用户点击“搜索图书”按钮，则在搜索按钮正下方的同一页面上，我希望显示不同的选项。我尝试使用css visibility：hidden函数并将其切换回可见性：使用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>

Answer 1

改为使用

display : none

除了元素占用的空白空间外，它的作用相同。

看着这些标签，你就有了jQuery。您可以改为使用.hide()和.show()。

如何在不使用可见性功能的情况下隐藏元素

1 个答案: