如题,代码奉上。
<html> <head> <title>denotoggle</title> <style> #box { width: 100px; height: 100PX; background-color: #ddd } .show { visibility: hidden; } </style> <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script> <!-- //java script方法 --> <script type="text/javascript"> window.onload = function() { function toglemain() { var obj = document.getElementById("box"); if (obj.className == "") { obj.className = "show"; } else { obj.className = ""; } } var clickbutton = document.getElementById("toggle"); clickbutton.onclick = toglemain; //OnClick方法与Click事件 点击一下Button,实际上是先执行OnClick方法,但是问什么,同时还出发了Click事件呢?这是因为,OnClick方法内部触发了Click事件。 } </script> <!-- //jQuery Toggle方法 --> <script type="text/javascript"> $(document).ready(function() { $(".btn1").click(function() { /* $("p#box").toggle(); */ $("#box").toggleClass("show"); }); }); </script> </head> <body> <div id="box"></div> <button id="toggle">javascript toggle</button> <button class="btn1">jQuery Toggle</button> </body> </html>
另求大家补充个jQuery的addClass与remove实现隐藏显示的代码。