Question

我正在开发WebApi项目。

在index.cshtml文件中，我尝试根据按钮单击显示和隐藏div。现在我使用Visibility隐藏和可见。而不是这个我需要使用display none和show，因为visibility =“hidden”方法只是隐藏div它不会删除div空间。如果我显示第二个div它是在第一个div下面。

我的代码

<table>
    <tr>
        <td>
             <input type="button" value="Hide"  runat="server" onclick="Testing()"/>
             <input type="button" value="Show"  runat="server" onclick="Testing2()"/>
        </td>
    </tr>
     <tr>
         <td>
            <div runat="server" id="InputuploadDivTest" style="visibility:visible">
                @Html.Raw(@TempData["tranresult"])
            </div>
         </td>
    </tr>
    <tr>
        <td>
            <div runat="server" id="UilDivTest" style="visibility:hidden">
                 @Html.Raw(@TempData["Result"])
            </div> 
         </td>
    </tr>
</table>

脚本代码

<script type="text/javascript">
            function Testing() 
            {
                document.getElementById("InputuploadDivTest").style.visibility = "visible";
                document.getElementById("UilDivTest").style.visibility = "hidden";

             }
            function Testing2() {
                document.getElementById("UilDivTest").style.visibility = "visible";
                document.getElementById("InputuploadDivTest").style.visibility = "hidden";
            }
</script>

如何使用display：none并显示上面的代码？

Answer 1

您可以使用“display：none”来隐藏特定的div

<div runat="server" id="UilDivTest" style="display:none">
             @Html.Raw(@TempData["Result"])
        </div> >

您可以通过以下方式显示此div：

function Testing2() {
           document.getElementById("UilDivTest").style.display = "block"
        }

您还可以通过向其添加“display”属性来隐藏特定div：

document.getElementById("UilDivTest").style.display = "none"

如何在web api mvc项目中使用显示而不是可见性？

我的代码

1 个答案: