切换显示与隐藏页面元素

最新推荐文章于 2023-07-21 11:21:14 发布

转载最新推荐文章于 2023-07-21 11:21:14 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sherrykid/p/4591875.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的HTML页面示例，该示例使用JavaScript实现了一个按钮控制的元素显示与隐藏的功能。通过HTML的hidden属性配合JavaScript，可以轻松地在网页上实现元素的显示与隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript">
 7         function showAndHidden(id,btid){
 8             var target = document.getElementById(id);
 9             target.hidden = !target.hidden;
10             if(target.hidden){
11                 document.getElementById(btid).innerHTML = "显示";
12             }else{
13                 document.getElementById(btid).innerHTML = "隐藏";
14             }
15         }
16     </script>
17 </head>
18 <body>
19     <button id="bt1" onclick="showAndHidden('target','bt1')">显示</button>
20     <div id="target" hidden="true" style="height: 80px">
21         文字内容
22     </div>
23 </body>
24 </html>