点击按钮控制DIV显示隐藏异常：连续点击布局崩溃求助

问题根源 #

你遇到的连续点击按钮导致布局崩溃的问题，核心原因是误用了jQuery的toggle()方法。你传入的'show'和'hide'并不是用来强制固定元素显示/隐藏状态的参数——实际上，toggle()的字符串参数是用来指定动画效果（比如'slow'、'fast'）的，它的核心逻辑是切换元素的当前状态（显示变隐藏，隐藏变显示）。

举个实际场景：第一次点击Button one时，#punto1本来是显示状态，toggle('show')看起来让它保持显示，但第二次点击时，toggle()会把它切换为隐藏；同时#punto2和#punto3的toggle('hide')也会把它们从隐藏状态切换为显示，这就导致了多个div同时出现的混乱情况。

修复方案：强制控制显示/隐藏状态 #

我们只需要把toggle()替换为show()和hide()方法——这两个方法会强制设置元素的显示/隐藏状态，不管元素当前是什么状态，点击按钮时都会执行对应的操作，不会出现状态切换混乱。

修改后的jQuery代码如下：

jQuery(document).ready(function(){
  // 按钮1的点击事件
  jQuery('#hideshow').on('click', function(event) {
    jQuery('#punto1').show();
    jQuery('#punto2').hide();
    jQuery('#punto3').hide();
  });
  
  // 按钮2的点击事件
  jQuery('#hideshow2').on('click', function(event) {
    jQuery('#punto1').hide();
    jQuery('#punto2').show();
    jQuery('#punto3').hide();
  });
  
  // 按钮3的点击事件
  jQuery('#hideshow3').on('click', function(event) {
    jQuery('#punto1').hide();
    jQuery('#punto2').hide();
    jQuery('#punto3').show();
  });
});

优化方案：更简洁的代码结构（可选） #

如果后续需要增加更多按钮和内容块，上面的重复代码会不好维护。可以通过给按钮和内容块添加统一的类名，配合data-*属性来关联，让代码更简洁易扩展：

修改后的HTML：

<input class="tab-btn" type="button" value="Button one" data-target="#punto1" />
<input class="tab-btn" type="button" value="Button two" data-target="#punto2" />
<input class="tab-btn" type="button" value="Button third" data-target="#punto3" />

<div class="tab-content" id="punto1"> Main content </div>
<div class="tab-content" id="punto2"> Second div </div>
<div class="tab-content" id="punto3"> Third div </div>

修改后的CSS：

.tab-content:not(#punto1) {
  display: none;
}

修改后的jQuery：

jQuery(document).ready(function(){
  jQuery('.tab-btn').on('click', function() {
    // 获取当前按钮对应的目标内容块
    var target = jQuery(this).data('target');
    // 隐藏所有内容块
    jQuery('.tab-content').hide();
    // 显示目标内容块
    jQuery(target).show();
  });
});

这种写法只需要一段代码就能处理所有按钮，后续新增按钮和内容块时，只需要添加对应的类和data-target属性即可，不需要修改JavaScript代码。

内容的提问来源于stack exchange，提问作者Patrick Ben