Javascript clicks the button to achieve the hidden display switching effect

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

WBOY

Release： 2016-05-16 15:16:18

Original

1844 people have browsed it

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>

Copy after login

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.