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;的末尾有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);
            }
        }

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

3 个答案: