页面内容的隐藏和显示-hide()方法和show()方法_hide和show

作者：weixin_40725706 | 2024-03-07 01:45:27

踩

hide和show

有些时候我们需要在一个页面中不刷新页面直接隐藏和显示部分信息，这个时候我们可以使用hide()方法和show()方法。

hide()方法：

描述：使用自定义效果来隐藏匹配的元素。

show()方法：

show() 方法显示隐藏的被选元素。

注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

hide()：

.hide( effect [, options ] [, duration ] [, complete ] )

参数	类型	描述	默认值
effect	String	一个字符串，指示要使用哪一种特效。
options	Object	特效具体的设置和 easing。
duration	Number 或 String	一个字符串或一个数字，指定动画将运行多久。	400
complete	Function()	一旦动画完成时要调用的函数。

   .hide( options ) 
 

参数	类型	描述
options	Object	所有的动画设置。唯一一个必需的属性是 effect。 effect 类型：String 描述：一个字符串，指示要使用哪一种特效。 easing（默认值：`"swing"`）类型：String 描述：一个字符串，指示要使用的 easing 函数。 duration（默认值：`400`）类型：Number 或 String 描述：一个字符串或一个数字，指定动画将运行多久。 complete 类型：Function() 描述：一旦动画完成时要调用的函数。 queue（默认值：`true`）类型：Boolean 或 String 描述：一个布尔值，指示是否将动画放在特效队列中。如果是 false，动画将立即开始。自 jQuery 1.7 起，queue 选项也接受一个字符串，在这种情况下，动画添加到由字符串表示的队列中。

该插件扩展自 jQuery 内置的 .hide() 方法。如果 jQuery UI 未加载，调用 .hide() 方法不会直接失败，因为该方法在 jQuery 中存在。但是不会发生预期的行为。

show():

语法

 
   $( 
   selector).show( 
   speed,easing,callback) 
  

参数	描述
speed	可选。规定显示效果的速度。可能的值：毫秒 "slow" "fast"
easing	可选。规定在动画的不同点上元素的速度。默认值为 "swing"。可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动提示：扩展插件中提供更多可用的 easing 函数。
callback	可选。show() 方法执行完之后，要执行的函数。

参数

描述

speed

可选。规定显示效果的速度。

可能的值：

毫秒
"slow"
"fast"

easing

可选。规定在动画的不同点上元素的速度。默认值为 "swing"。

可能的值：

"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动

提示：扩展插件中提供更多可用的 easing 函数。

callback

可选。show() 方法执行完之后，要执行的函数。

这里提供一个简单的示例代码：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏标签内容</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$(".btn1").click(function(){
		$("p").hide();
	});
	$(".btn2").click(function(){
		$("p").show();
	});
});
</script>
</head>
<body>
 
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
 
</body>
</html>

这里隐藏的是<p>标签中的内容，当然，我们换成其他的标签页都同样适用。为了只显示一个按钮，我在次数的使用是这样的：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏、显示标签内容</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$(".btn1").click(function(){
		$("p1").hide();
		$("p2").show();
	});
	$(".btn2").click(function(){
		$("p1").show();
		$("p2").hide();
	});
});
</script>
</head>
<body>
 
<p1>这是一。</p1>
<p2>这是二。</p2>
<p2><button class="btn1">按钮一</button></p2>
<p1><button class="btn2">按钮二</button></p1>
 
</body>
</html>

上面的都是用按钮实现的显示、隐藏，由于在显示和隐藏的同时，我需要知道谁隐藏了，谁显示了，需要将这个值传递到后台，所以我又设计的下拉框选择，决定显示和隐藏，这样就可以实现后台的判断。

实现隐藏和显示功能的下拉框我是这么实现的：


类型：<input name="Type" id = "Type" class="easyui-combobox" data-options="
					valueField: 'id',
					textField: 'value',
					data: [{
						id: '0',
						value: '个人',
						selected: true,
					},{
						id: '1',
						value: '企业'
					}]" />

调用的方法：


<script>   
$(function(){
            $("#customerType").combobox({
                valueField: 'id',
                textField: 'value',
                editable: false,
                panelHeight: "auto",
                onChange : function(n, o) {
           			if(n==1){
           				$("span1").hide();
                			$("span2").show();
           			}else{
           				$("span2").hide();
                			$("span1").show();
           			}
                }
                
            });
        });  
        
    </script>

我要实现显示、隐藏的内容（不同时存在于界面）


<span1>性别：<select name="sex" id="sex" class="easyui-combobox" style="width: 156px" panelHeight="auto" editable="false">   
                    <option value="" selected="selected">--全部--</option>   
                    <option value="0">男</option>   
                    <option value="1">女</option>
                </select>
</span1>
<span2>
企业规模：<select name="enterprise" id="enterprise" class="easyui-combobox" style="width: 156px" panelHeight="auto" editable="false"> <option value="" selected="selected">--全部--</option> <option value="0">2万人以下</option> <option value="1">2万人以上</option> </select>
</span2>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/202832