在 jQuery 中可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素 ...
在 jQuery 中可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素,以及使用 toggle() 方法能夠切換 hide() 和 show() 方法。
隱藏例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquey隱藏顯示</title> 6 <!-- jquery文件自己下載引用近來即可,我這裡是1.12.0的壓縮版 --> 7 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 $('p').click(function(){ 11 $(this).hide(); 12 }) 13 }) 14 </script> 15 </head> 16 <body> 17 <p>點我,消失</p> 18 <p>點我,我也消失</p> 19 </body> 20 </html>
通過 jQuery,還可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquey隱藏顯示</title> <style> div{width:100px;height:100px;border:1px solid red;} </style> <!-- jquery文件自己下載引用近來即可,我這裡是1.12.0的壓縮版 --> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.show1').click(function(){ $('div').show(1000); }) $('.hide1').click(function(){ $('div').hide(1000); }) }) </script> </head> <body> <button class="show1">顯示</button> <button class="hide1">隱藏</button> <div> <p>點我,消失</p> <p>點我,我也消失</p> </div> </body> </html>
通過 jQuery,您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquey隱藏顯示</title> 6 <style> 7 div{width:100px;height:100px;border:1px solid red;} 8 </style> 9 <!-- jquery文件自己下載引用近來即可,我這裡是1.12.0的壓縮版 --> 10 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 $(".show1").click(function(){ 14 $("div").toggle("slow"); 15 }); 16 }); 17 </script> 18 </head> 19 <body> 20 <button class="show1">顯示&隱藏</button> 21 <div> 22 <p>點我,消失</p> 23 <p>點我,我也消失</p> 24 </div> 25 </body> 26 </html>