分享一段代码实例,它实现了点击按钮元素隐藏和显示效果。

代码实例如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>元素的显示和隐藏-51前端</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script language="javascript" type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("div").hide(1000);
    $("#show").click(function(){
      $("div").show(1000);
    })
  })
})
</script>
</head> 
<body> 
<div>51前端欢迎您</div>
<button id="show">显示</button>
<button id="hide">隐藏</button>
</body> 
</html>
以上代码实现了我们的要求,可以点击按钮的时候实现div的隐藏和显示。

然后实际应用中都是点击同一个按钮来实现元素的显示和隐藏效果,代码实例如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</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">51前端欢迎您</div>
</body>
</html>

代码描述:jQuery点击按钮 显示或隐藏元素。jQuery点击按钮显示或隐藏元素简单介绍



197 262



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到