Javascript与jQuery方法的隐藏与显示

  示例代码很简单,直接奉上,就不多废话了

  

复制代码 代码如下:

  <html>

  <head>

  <title>denotoggle</title>

  <style>

  #box {

  width: 100px;

  height: 100PX;

  background-color: #ddd

  }

  .show {

  visibility: hidden;

  }

  </style>

  <script src="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>

  小伙伴们是否了解清楚了Javascript与jQuery方法的隐藏与显示的方法了呢,需要的小伙伴自己来拿走吧。