您的位置：首页 > Web前端 > JQuery

【每天一个JQuery特效】根据可见状态确定是否显示或隐藏元素（3）

2018-06-21 08:09 1176 查看
效果图示：



主要代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据可见状态确定 是否显示或隐藏元素</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
//对单击“隐藏”或显示图片 按钮的响应
$("#mytogglebtn").click(function(){
$("#div1").toggle();
var t = $("#mytogglebtn").text() == "隐藏图片"?"显示图片" : "隐藏图片";
$("#mytogglebtn").text(t);
});
//对单击“隐藏图片”按钮的响应
$("#myhidebtn").click(function(){
$("#div1").hide();
});
//对单击“显示图片”按钮的响应
$("#myshowbtn").click(function(){
$("#div1").show();
});
});
</script>
</head>
<body>
<button id="mytogglebtn" style="width: 130px;">隐藏图片</button>
<button id="myhidebtn" style="width: 130px;">隐藏图片</button>
<button id="myshowbtn" style="width: 130px;">显示图片</button><br />
<div id="div1">
<img src="img/banner-bg.jpg" width="400" height="150"/>
</div>
</body>
</html>

相关说明：

在本例代码中，如果被选中的元素已被显示，调用hide（）方法则隐藏该元素，hide（）方法的语法声明如下：

$(selector).hide(speed,callback)

其中，speed和callback参数可选，speed默认值为"0"，可能值为毫秒值，callback参数，除非设置了speed参数，否则不能设置该参数。

如果被选元素已被隐藏，调用show（）方法则显示这些元素，show（）方法的语法声明如下：

$(selector).show(speed,callback)

toggle()方法用于切换元素的可见状态，如果被选中元素是可见的，则隐藏；相反，则显示;toggle()方法的语法声明如下:

$(selector).toggle(speed,callback,switch)

参数switch是一个可选参数，类型为布尔值，该参数规定toggle（）方法是否隐藏或显示所有被选元素；True表示显示,False表示隐藏，如果设置了此参数，则无法使用speed和callback。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery
相关文章推荐
新的分享
章节导航