Home >Web Front-end >JS Tutorial >Javascript clicks the button to achieve the hidden display switching effect_javascript skills

Javascript clicks the button to achieve the hidden display switching effect_javascript skills

WBOYOriginal: 2016-05-16 15:16:181923browse

The example in this article shares the switching code for hiding and displaying by clicking a button for your reference. The specific content is as follows

Rendering:

In many applications, there is such a function. Clicking the same button can switch between showing and hiding an element. Here is a code example to introduce how to achieve this effect. The code is as follows:

<html>
<head>
<meta charset="gb2312">
<title>隐藏和显示</title>
<style type="text/css">
#thediv
{
 width:200px;
 height:100px;
 line-height:100px;
 text-align:center;
 background-color:green;
}
</style>
<script type="text/javascript">
function Show_Hidden(obj)
{
 if(obj.style.display=="block")
 {
  obj.style.display='none';
 }
 else
 {
  obj.style.display='block';
 }
}
window.onload=function()
{
 var olink=document.getElementById("link");
 var odiv=document.getElementById("thediv");
 olink.onclick=function()
 {
  Show_Hidden(odiv);
  return false;
 }
}
</script>
</head>
<body>
<a href="#" id="link">显示\隐藏切换</a>
<div id="thediv" style="display:block">脚本之家欢迎您</div>
</body>
</html>

The above code realizes our requirements. Clicking on the top link can switch between displaying and hiding the div. Here is an introduction to its implementation process.
Implementation principle:
Register the onclick event handler for the link. This handler can determine the style.display attribute value of the div. If it is block, set it to none, which means the div is set to the hidden state. Otherwise, set it to block, which means the div is set to hidden. To display status, the principle is roughly the same. What needs special attention is that in the div, the purpose of using style="display:block" is to allow the obj.style.display statement to obtain the attribute value. Otherwise, the div cannot be set to hidden on the first click. You can remove it. Do a test with style="display:block". The return false statement is to prevent the jump effect of the link.

For information on return false, please refer to this article: "Learning return false in jQuey"

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

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

Previous article：JavaScript File API implements file upload preview_javascript skillsNext article：JavaScript File API implements file upload preview_javascript skills

See more

Javascript clicks the button to achieve the hidden display switching effect_javascript skills

Related articles