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

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

2010-05-13

示例一： 这里本来是 显示的。 这里本来是隐藏的

程序代码如下：

<script type="text/javascript"> $(document).ready(function(){ $("h6").toggle() }); </script> <h6>这里本来是显示的。</h6> <h6>这里本来是隐藏的</h6> <!--切换元素的可见状态。 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 -->

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

示例二： 这里本来是显示的。 这里本来是隐藏的

程序代码：

<script type="text/javascript"> $(document).ready(function(){ $("input").click(function(){ $("h6").toggle(); }) }); </script> <input type="button" value="切换"> <h6>这里本来是显示的。</h6> <h6>这里本来是隐藏的</h6> 示例三： 点下我下面的文字会在显示与隐藏两个状态中切换

欢迎访问简明现代魔法
点击 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 href="http://www.nowamagic.net"> 点下我下面的文字会在显示与隐藏两个状态中切换 </a> <br /> <div>欢迎访问简明现代魔法 <br /> 点击 toggle( Function even, Function odd )每次点击时切换要调用的函数每次点击时切换要调用的函数。</div>