在 ASP.NET 中使用 javascript 隐藏和显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17714408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hide and display a div using javascript in ASP.NET
提问by Angripa
I want display an audio player, after click a button. here my code
单击按钮后，我想显示音频播放器。这是我的代码
<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>
But, when i run in browser it still display the audio player. any solution for this?
但是，当我在浏览器中运行时，它仍然显示音频播放器。有什么解决办法吗？
回答by Shadow Wizard is Ear For You
First of all, to have the player hidden by default you don't need to use JavaScript. Add such style to the container instead:
首先，要默认隐藏播放器，您不需要使用 JavaScript。改为将此类样式添加到容器中：
<div id="myAudio" style="display: none;">
And to show it back upon clicking the button:
并在单击按钮时显示回来：
function viewAudio() {
document.getElementById('myAudio').style.display = "block";
}
回答by Chris
If this is an ASP page then that button click might be doing a postback. This will reset the state. You should have either return false;at the end of the onclick.
如果这是一个 ASP 页面，则该按钮单击可能正在执行回发。这将重置状态。您应该return false;在onclick.
Alternatively, if the problem is that the div is never hidden, you can set the style directly on the div element in the html markup.
或者，如果问题是从不隐藏 div，则可以直接在 html 标记中的 div 元素上设置样式。
Make sure that you are using your browser's development tools to check the css styling currently on the element you're looking at. You can also set breakpoints and step through your javascript code, right in your browser.
确保您正在使用浏览器的开发工具来检查当前正在查看的元素上的 css 样式。您还可以直接在浏览器中设置断点并逐步执行 JavaScript 代码。
回答by Zuhair Ali
<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);
}
}