窗口的显现与隐藏，opacity

最新推荐文章于 2021-04-10 16:18:21 发布

原创最新推荐文章于 2021-04-10 16:18:21 发布 · 335 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#开发工具 #javascript #ViewUI

知识总结专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用jQuery实现网页元素的显示与隐藏，并通过opacity属性调整元素的透明度。提供两种方法：一是单独设置显示和隐藏按钮；二是使用同一个按钮切换显示状态。

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

1.窗口的显现与隐藏

通常在我们做页面的时候可能会遇到这样的一个问题，点击按钮要跳出一个窗口。下面是本人对这个问题的处理方式。

1)点击显现按钮弹出窗口，点击隐藏按钮窗口隐藏

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(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>
</html>

2）点击按钮窗口显现/隐藏

<html>
<head>
 <script src="/jquery/jquery-1.11.1.min.js"></script>
 <script type="text/javascript">
      $(document).ready(function(){
      $("button").click(function(){
      $("p").toggle();
     });
     });
  </script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
</body>
</html>

2, opacity 属性设置元素的不透明级别

透明度从 0.0 （完全透明）到 1.0（完全不透明）.