javascript - 单击按钮时隐藏 DIVS

Question

• 我有 3 个 div
• 每个 div 内都有一个图像
• 我有 3 个按钮
• 单击其中一个按钮时，一个 div 应可见，其他 div 应隐藏

我设法通过搜索一些我可以适应的 JavaScript 代码来完成一些事情，并且我以某种方式做到了；但它无法正常工作。

当按钮被单击一次时，它会按预期工作，但是当连续单击两次时，结果会在布局崩溃中反转，导致两个 div 显示而不是隐藏。

演示如下:https://jsfiddle.net/ab8b7g4w/

HTML 代码

<input id="hideshow" type="button" value="Button one" />
<input id="hideshow2" type="button" value="Button two" />
<input id="hideshow3" type="button" value="Button third" />

<div id="punto1">
Main content
</div>

<div id="punto2">
Second div
</div>

<div id="punto3">
Third div
</div>

JQUERY 代码

jQuery(document).ready(function(){
        jQuery('#hideshow').on('click', function(event) {        
             jQuery('#punto1').toggle('show');
             jQuery('#punto2').toggle('hide');
             jQuery('#punto3').toggle('hide');
        });
    });

jQuery(document).ready(function(){
        jQuery('#hideshow2').on('click', function(event) {      
             jQuery('#punto1').toggle('hide');
             jQuery('#punto2').toggle('show');
             jQuery('#punto3').toggle('hide');
        });
    });

jQuery(document).ready(function(){
        jQuery('#hideshow3').on('click', function(event) {      
             jQuery('#punto1').toggle('hide');
             jQuery('#punto2').toggle('hide');
             jQuery('#punto3').toggle('show');
        });
    });

CSS 代码

#punto2, #punto3 { display: none; }

有什么办法可以通过双击按钮来解决这个问题吗？

非常感谢

Answer 1

使用 .toggle() 时不需要显示和隐藏，.toggle() 会切换状态。使用 .hide() 和 .show() 隐藏和显示 div。