快捷导航
查看: 20871|回复: 1

[分享] jQuery实现的点击按钮实现div的隐藏和显示切换效果

[复制链接]
发表于 2014-2-10 10:23:39 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-7-22 11:52 编辑

jQuery实现的点击按钮实现div的隐藏和显示切换效果:
本章节仅仅是弹出一个div层,如果想要弹出带有遮罩的层可以参阅点击弹出居中带有透明遮罩层窗口一章节。
点击按钮或者其他元素实现指定元素的显示和隐藏的切换在实际应用中非常常见,下面就以点击按钮实现div元素的隐藏和显示切换为例做一下简单介绍,代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

以上代码实现了我们的要求,点击按钮而已实现div的显示和隐藏切换效果,下面简单介绍一下它的实现过程。
一.实现原理:
点击按钮的时候,首先会判断div元素是否处于隐藏状态,如果是隐藏状态就将div设置为显示,然后将按钮的value属性值设置为"点击隐藏",如果处于显示状态,则进行相反的操作。
二.相关阅读:
1.click事件可以参阅
jQuery的click事件一章节。
2.is()函数可以参阅
jQuery的is()方法一章节。
3.show()函数可以参阅
jQuery的show()方法一章节。
4.val()函数可以参阅
jQuery的val()方法一章节。
5.hide()函数可以参阅
jQuery的hide()方法一章节。
发表于 2017-7-22 11:53:08 | 显示全部楼层
很不错的基础文章

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-8-21 12:37 , Processed in 0.084316 second(s), 24 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表