1.简单的点击隐藏和显示----jquery实现
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.btn1').click(function(){ if($('p').is(':hidden')) { $('p').slideDown('slow'); $(this).text('收起'); } else { $('p').slideUp('slow'); $(this).text('展开'); } }); }); </script> </head> <body> <p>This is a paragraph.</p> <button class="btn1">Hide</button> </body> </html>
2.display:none
<html> <head> <title> New Document </title> <script LANGUAGE="JavaScript"> var flag=true; function f_test() { var divContainer=document.getElementById('divContainer'); // if(divContainer.style.display==""||divContainer.style.display=="block") if(flag) { divContainer.style.display="none"; } else { divContainer.style.display="block"; } flag=!flag; } </script> </head> <body> <input type='button' value="click it" onclick='f_test()'> <p id="divContainer">This is a paragraph.</p> </body> </html>