JQuery 学习：切换HTML元素的显示与隐藏
时间：2013-08-12 11:28 来源：互联网 作者：源码搜藏 收藏
示例一： 这里本来是隐藏的 程序代码如下： 01 script type= "text/javascript" 02 $(document).ready( function (){ 03 $( "h6" ).toggle() 04 }); 05 /script 06 07 h6 style= "font-weight:normal;" 这里本来是显示的。/h6 08 09 h6 style= "display: non
示例一：
这里本来是隐藏的
程序代码如下：
01
|
<script type="text/javascript">
|
02
|
$(document).ready(function(){
|
03
|
$("h6").toggle()
|
04
|
});
|
05
|
</script>
|
06
|
07
|
<h6 style="font-weight:normal;">这里本来是显示的。</h6>
|
08
|
09
|
<h6 style="display: none; font-weight:normal;">这里本来是隐藏的</h6>
|
10
|
<!--切换元素的可见状态。
|
11
|
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
|
12
|
-->
|
toggle( )的用法：$("p").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
示例二：
这里本来是隐藏的
程序代码：
01
|
<script type="text/javascript">
|
02
|
$(document).ready(function(){
|
03
|
$("input").click(function(){
|
04
|
$("h6").toggle();
|
05
|
})
|
06
|
});
|
07
|
</script>
|
08
|
09
|
<input type="button" value="切换">
|
10
|
11
|
<h6 style="font-weight:normal;">这里本来是显示的。</h6>
|
12
|
13
|
<h6 style="display: none; font-weight:normal;">这里本来是隐藏的</h6>
|
示例三：
点下我下面的文字会在显示与隐藏两个状态中切换
欢迎访问简明现代魔法 www.nowamagic.net
点击 toggle( Function even, Function odd )每次点击时切换要调用的函数每次点击时切换要调用的函数。
点击 toggle( Function even, Function odd )每次点击时切换要调用的函数每次点击时切换要调用的函数。
程序代码：
01
|
<script type="text/javascript">
|
02
|
$(document).ready(function(){
|
03
|
$("a.nowamagic").toggle(function(){
|
04
|
$(".stuff").hide('slow');
|
05
|
},function(){
|
06
|
$(".stuff").show('fast');
|
07
|
});
|
08
|
});
|
09
|
</script>
|
10
|
11
|
<a class="nowamagic" href="http://www.nowamagic.net">
|
12
|
点下我下面的文字会在显示与隐藏两个状态中切换
|
13
|
</a>
|
14
|
<br />
|
15
|
<div class="stuff">欢迎访问简明现代魔法 www.nowamagic.net <br />
|
16
|
点击
|
17
|
toggle( Function even, Function odd )每次点击时切换要调用的函数每次点击时切换要调用的函数。</div>
|
上一篇：JQuery 常用技巧介绍
下一篇：漂亮的网站风格切换
jQuery技术阅读排行
-
2013-08-12
-
2013-04-09
-
2013-05-13
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-04-09
-
2013-08-12
最新文章
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
热门源码
