在ASP.NET中使用JavaScript隐藏和显示div

Question

单击按钮后，我想显示一个音频播放器。 这是我的代码

<script type="text/javascript">
    function viewAudio() {
        document.getElementById('myAudio').style.display = ""
    }
    document.getElementById('myAudio').style.display = "none"


</script>

<button value="@Html.DisplayFor(modelItem => item.SampleURL)" id="audioViewer" onclick="viewAudio()">
            <img src="../../Content/images/audio.png"></button>

<div id="myAudio">
<audio controls preload="none">
    <source src="#" type="audio/mp3">
</audio>
</div>

但是，当我在浏览器中运行时，它仍然显示音频播放器。 有什么解决办法吗？

Answer 1

首先，要在默认情况下隐藏播放器，您无需使用JavaScript。 而是将这样的样式添加到容器中：

 <div id="myAudio" style="display: none;">

并在单击按钮时将其显示回来：

function viewAudio() {
    document.getElementById('myAudio').style.display = "block";
}

Answer 2

如果这是ASP页，则该按钮单击可能正在回发。 这将重置状态。 您应该要么return false;要么return false; 在onclick的末尾。

或者，如果问题是div从未隐藏，则可以直接在html标记中的div元素上设置样式。

确保您正在使用浏览器的开发工具来检查要查找的元素上当前的CSS样式。 您还可以直接在浏览器中设置断点并逐步执行javascript代码。

Answer 3

<asp:Button ID="ButtonShowPanel" CausesValidation="false" CssClass="btn btn-primary pull-right" runat="server" Text="Add Contact" OnClientClick="javascript:SetVisiblityPanels(false); return false;" />

  function SetVisiblityPanels(check) { if (check) { $('.SearchPanel').show(1000); $('.DescriptionPanel').hide(1000); } else { $('.SearchPanel').hide(1000); $('.DescriptionPanel').show(1000); } }