简明现代魔法 -> JQuery -> JQuery 学习:切换HTML元素的显示与隐藏

JQuery 学习:切换HTML元素的显示与隐藏

2010-05-13

示例一:

这里本来是 显示的。
这里本来是隐藏的

程序代码如下:

<script type="text/javascript">
$(document).ready(function(){
	$("h6").toggle()
}); 
</script>

<h6 style="font-weight:normal;">这里本来是显示的。</h6>

<h6 style="display: none; font-weight:normal;">这里本来是隐藏的</h6>
<!--切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
-->

toggle( )的用法:$("p").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

示例二:

这里本来是显示的。
这里本来是隐藏的

程序代码:

<script type="text/javascript"> 
$(document).ready(function(){
  	$("input").click(function(){
     	$("h6").toggle(); 
  	})
}); 
</script> 

<input type="button"  value="切换">

<h6 style="font-weight:normal;">这里本来是显示的。</h6>

<h6 style="display: none; font-weight:normal;">这里本来是隐藏的</h6>

示例三:

点下我下面的文字会在显示与隐藏两个状态中切换
欢迎访问简明现代魔法 www.nowamagic.net
点击 toggle( Function even, Function odd )每次点击时切换要调用的函数每次点击时切换要调用的函数。

程序代码:

<script type="text/javascript"> 
$(document).ready(function(){
	$("a.nowamagic").toggle(function(){
     	$(".stuff").hide('slow');
   	},function(){
     	$(".stuff").show('fast');
   	});
});
</script>

<a class="nowamagic" href="http://www.nowamagic.net">
点下我下面的文字会在显示与隐藏两个状态中切换
</a> 
<br />
<div class="stuff">欢迎访问简明现代魔法 www.nowamagic.net <br />
点击
toggle( Function even, Function odd )每次点击时切换要调用的函数每次点击时切换要调用的函数。</div>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们