How to display hidden divs in javascript: first create a new file and create a button button; then create a hidden div and set a hidden style to the div; finally add a click-hide event for the button button.
The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.
How to show and hide divs using javascript:
1. Open the HTML development software and create a new HTML file. As shown in the figure:
#2. Create a button button on the html file, and then set an id to the button. In the case, set the button id to show. As shown in the picture:
Code:
<input type="button" id="show" value="显示隐藏div" />
3. Then create a hidden div, write the content that needs to be hidden on this div, and then give this Set an id in the div, and set the case id to hide in the case. As shown in the picture:
Code:
<div id="hide">我是隐藏的div</div>
4. Set a hidden style for the div. After the
tag, set the style display:none for the id as hide, so that the div with the id as hide will be hidden. As shown in the picture: <p> Style code: </p><pre class="brush:php;toolbar:false"><style>
#hide{display: none;padding-top: 15px;}
</style></pre><p><img src="https://img.php.cn/upload/image/718/309/380/1617853544958635.png" title="1617853544958635.png" alt="How to show and hide div in javascript"></p>
<p>5. Add a click-hide event for the button button. After clicking the button button, change the display of the hidden div to block, so that the div will be displayed after clicking. As shown in the picture: </p>
<p>Event code: </p><pre class="brush:php;toolbar:false"><script type="text/javascript">
window.onload = function(){
document.getElementById("show").onclick = function(){
document.getElementById("hide").style.display = "block";
}
}
</script></pre><p><strong><img src="https://img.php.cn/upload/image/886/167/729/1617853555861705.png" title="1617853555861705.png" alt="How to show and hide div in javascript"></strong></p>
<blockquote><p>##Related free learning recommendations: <strong></strong><a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript video tutorial<strong></strong></a></p></blockquote>
The above is the detailed content of How to show and hide div in javascript. For more information, please follow other related articles on the PHP Chinese website!
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
