分享一段代码给大家。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> h3 { background-color: #eeeeee; }
p{ font-size: 13px; text-indent: 100px; }</style> <script src="../jquery-3.5.1/jquery-3.5.1.js"></script> <script> /* * toggle函数适用于通过jQuery框架隐藏的页面元素 * 或在css中声明为“display：none”的页面元素， * 但是它不适用于在css声明为“visibility：hidden” * 的页面元素。 * */ $(document).ready(function () { $("button").click(function () { $("h3").toggle(); $("p").toggle(); }); });</script></head><body> <h2 class="h2-caption">实用的jQuery代码段-显示和隐藏网页内容的功能</h2> <hr> <br> <button type="button" id="id_button">显示/隐藏</button> <h3>重大新闻</h3> <p>内容如下</p> <h3>重大新闻</h3> <p>内容如下</p> <h3>重大新闻</h3> <p>内容如下</p> <h3>重大新闻</h3> <p>内容如下</p></body></html>
