一、jQuery hide() 显示和 show()隐藏
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#hide').click(function(){ $("p").hide(); }) $('#show').click(function(){ $("p").show(); }); }); </script> </head> <body> <p id="p1">如果点击“隐藏”按钮,我就会消失。如果点击“显示”按钮,我又出现啦</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> </body>
语法:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#hide').click(function(){ $("p").hide(1000);//给hide加上参数 }) $('#show').click(function(){ $("p").show(1000); }); }); </script> </head> <body> <p id="p1">如果点击“隐藏”按钮,我就会消失。如果点击“显示”按钮,我又出现啦</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> </body>
二、jQuery toggle()方法
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#hide').click(function(){ $("p").toggle(1000);//给hide加上参数 }); }); </script> </head> <body> <p id="p1">如果点击"隐藏/显示"按钮,我就会消失或者出现啦</p> <button id="hide" type="button">隐藏/显示</button> </body>
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。