jQuery點選按鈕實現div的隱藏和顯示切換效果

龍騰四海365發表於2016-04-10
jQuery

 jQuery點選按鈕實現div的隱藏和顯示切換效果


點選按鈕或者其他元素實現指定元素的顯示和隱藏的切換在實際應用中非常常見，下面就以點選按鈕實現div元素的隱藏和顯示切換為例做一下簡單介紹，程式碼例項如下:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>螞蟻部落</title>
<style type="text/css">
  #hidden_enent{
    width:200px;
    height:150px;
    background:#ccc;
    text-align:center;
    line-height:150px;
  }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$(function(){
  $('#click_event').click(function(){
    if($('#hidden_enent').is(':hidden')){
      $('#hidden_enent').show();
      $('#click_event').val('點選隱藏');
    }
    else{
      $('#hidden_enent').hide();
      $('#click_event').val('點選顯示');
    }
  })
})
</script>
</head>
<body>
<input type="button" id="click_event" value="點選隱藏"/>
<div id="hidden_enent">螞蟻部落歡迎您</div>
</body>
</html>



相關文章