显示和隐藏弹出式 javascript

Question

单击按钮时我需要显示和隐藏弹出窗口。

这就是我现在拥有的：

jQuery(document).ready(function(){
 jQuery('#knop-popup1').click(function() {
    jQuery('#popup1').toggleClass('show');
       jQuery('#popup2').toggleClass('hidden');
});
});
</script>
<script>
jQuery(document).ready(function(){
 jQuery('#knop-popup2').click(function() {
    jQuery('#popup2').toggleClass('show');
   jQuery('#popup1').toggleClass('hidden');
});
});

我需要的是当按钮 1 被点击时 popup1 正在打开。 当点击按钮 2 时，popup1 正在关闭，而 popup2 正在显示。

不幸的是，这不起作用。 有人可以帮我解决这个问题吗？

格蕾丝

Answer 1

这是一个基本示例，展示了当用户单击不同按钮时如何隐藏/显示不同元素。

$("#showOne").on('click', () => {
  $("#one").attr("class", "");
  $("#two").attr("class", "hide");
})

$("#showTwo").on('click', () => {
  $("#two").attr("class", "");
  $("#one").attr("class", "hide");
})

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="one" class="hide">one</p>
<p id="two" class="hide">two</p>
<button id="showOne">show one</button>
<button id="showTwo">show two</button>