jQuery事件 控制 内容的显示与隐藏

<!--  把鼠标放上去,显示内容。离开不显示内容!  -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <style>
    .contentclass{display:none}
  </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <script>
$(document).ready(function(){
  $(".wijclass").mouseover(function(){
            $(this).next().show()
    })
   $(".wijclass").mouseout(function(){
            $(this).next().hide()
    })
})
</script>
 <body>
      <div id="firstid">
         <h5 class="wijclass">什么是jQuery?</h5>
         <div class="contentclass">
              要学会jQuery技术,必须多js代码。
         </div>
      </div>
 </body>
</html>




<!--  单击按钮循环显示与隐藏  -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <style>
    .contentclass{display:none}
  </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <script>
$(document).ready(function(){
  $(".wijclass").click(function(){
   
    var sflag  =  $(this).next().is(":visible");

      if(sflag==false){
            $(this).next().show()
    }else{
           $(this).next().hide()
    }

  })
})
</script>
 <body>
      <div id="firstid">
         <h5 class="wijclass">什么是jQuery?</h5>
         <div class="contentclass">
              要学会jQuery技术,必须多js代码。
         </div>
      </div>
 </body>
</html>

你可能感兴趣的:(jquery)