jquery hide,show方法问题
在jquery中我显示与隐藏元素可以直接使用show()和hide()来操作,这比起js中的操作要方便了,同时show()和hide()还可以 设置参数让我们的运行有个缓存效果
首先来看个段落文字的显示和隐藏
1:show() 方法
显示出隐藏的 p 元素。代码如下:
$(".btn2").click(function(){
$("p").show();
});
2:hide()隐藏可见的 p 元素:代码如下:
$(".btn1").click(function(){
$("p").hide();
});
3:jQuery代码如下:
$("element").show("slow");
运行该代码后,元素将在600毫秒内慢慢的显示出来。其它的速度关键字还有”normal“和”fast“(长度分别是400毫秒和200毫秒)。
不仅如此,还可以为显示速度指定一个数字,单位是毫秒。
例如,使用如下代码使元素在1秒钟(1000毫秒)内显示出来;
$(”element").show(1000);在前面的例子中,把其中的hide()方法改为hide(600),show()方法改为show(600)。
jQuery代码如下:
$(function () {
$("#panel h5.head").toggle(function () {
$(this).next().hide(600);
}, function () {
$(this).next().show(600);
})
});
从代码的执行过程中,可以发现,hide(600)方法会同时减少“内容”的高度、宽度和不透明度,直至3个属性的值为0,最后设置该元素的CSS规则为“display:none”。
然后我们再来看个简单的代码:
html
head
script type="text/javascript" src="/jquery/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
/script
/head
body
pThis is a paragraph./p
button class="btn1"Hide/button
button class="btn2"Show/button
/body
/html
这个就是超简单的显示与隐藏了,如果要有效果我们只要在hide或show中带时间或参数即可:
代码如下:
script type="text/javascript"
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide(1000);
});
$(".btn2").click(function(){
$("p").show(1000);
});
});
/script
jQuery的hide方法为什么不起作用
可能你的调用出了问题,可以先检查一下你的方法或者事件是不是有效的
jquery select 中 option隐藏和显示
jquery的hide方法只是在相应DOM上面增加了样式:display: none
而option不是可绘制的DOM,所以使用hide方法是无效的
两种解决方案:
1.在option标签上面加上disabled="disabled"属性,表示不可用,这种方案只是让option不能选择,但没有隐藏掉
2.如果想隐藏掉,只能把option从DOM树中去除,然后对去除的option进行缓存,在要显示的时候再将option从缓存中取出加入DOM树中
希望对您有帮助~
By Billskate
请教jquery的hide()和show()方法遇到的问题
myCallBack去掉括号就行了
这个效果用fadeIn和fadeOut也可以,渐隐渐现。
前端jquery show()hide()无效的问题
datatupeinfo1、step2alike、backstep这几个元素内部有其他内容吗?hide,show是只对本身生效的,如果内部有其他元素是会有影响的
jquery写的隐藏div为什么没有效果
非常大的可能是因为选择器的问题造成,你js代码中用了标签选择器($('dd[class="btn"]'))和类选择器($('.xiaoshi')),除非你的页面中只有一个上述元素,否则会匹配所有。
举例,你代码中的这句:
$('.xiaoshi').click(function(){
$('.askfor').css('display','none');
});
点击那个X后会将页面所有的 .askfor 为类名的层隐藏。
通过代码总体看出你存在的三个大问题:
对HTML不熟,熟手不会写center标签;
满篇都是内嵌CSS样式,CSS代码没有复用的可能;
对jQuery的API不熟,jq提供 .hide() 和 .show() 方法来实现元素的隐藏和显示的。