泉州网页设计中的内容的隐藏和显示-hide()方法和

泉州网页设计中的内容的隐藏和显示-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() 方法执行完之后,要执行的函数。
 
这里提供一个简单的示例代码:
<!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>
 
--------------------- 
作者:Java程序源 
来源:CSDN 
原文:https://blog.csdn.net/qq_34129814/article/details/78657006 
版权声明:本文为博主原创文章,转载请附上博文链接!

最新资讯

技术文章

广告设计合作