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

How to use display instead of visibility in web api mvc project?

本文关键字：显示 可见性 Web api 项目 mvc      更新时间：2023-09-26

我正在开发WebApi项目。

在 index.cshtml 文件中，我尝试根据按钮单击显示和隐藏div。现在我正在使用可见性隐藏和可见.取而代之的是，我需要使用显示无并显示，因为 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"隐藏特定的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"
相关文章：