如何使用 jQuery 实现多个 div 的独立切换显示与隐藏

本文介绍一种无需 cookie 或 localstorage 的纯前端方案，通过 jquery 精确控制多个按钮与对应 div 的显隐状态，支持逐个切换、批量控制及视觉反馈，兼顾可维护性与用户体验。

在实际开发中，常需实现“按钮控制对应区域显隐”的交互逻辑——例如多选项卡、折叠面板或筛选模块。原问题中的代码仅做单次切换（toggle()），但未处理“其他元素应保持初始可见”这一关键需求，导致状态混乱。正确思路是：每次操作前先重置全局状态（全部显示 + 移除禁用样式），再基于当前选中项更新目标元素。

以下为推荐实现方案（已优化结构与语义）：

✅ 推荐方案：基于复选框的语义化控制

使用 替代原 ，不仅提升可访问性（支持键盘操作、屏幕阅读器），也天然支持多选状态管理：

   Button 1
   Button 2
 
  Button 3


Div 1 content
Div 2 content
Div 3 content

$(function() {
  const $checkboxes = $('input[type="checkbox"]');
  const $panels = $('.content-panel');

  $checkboxes.on('change', function() {
    // 步骤1：重置所有按钮样式和面板状态
    $('.inactive').removeClass('inactive');
    $panels.show();

    // 步骤2：若无任何勾选，则全部显示（默认行为）
    const $checked = $checkboxes.filter(':checked');
    if ($checked.length === 0) return;

    // 步骤3：标记未选中按钮为 inactive，并隐藏所有面板
    $checkboxes.filter(':not(:checked)')
      .closest('label')
      .addClass('inactive');
    $panels.hide();

    // 步骤4：仅显示当前选中的对应面板
    $checked.each(function() {
      const targetId = '#mydiv' + $(this).val();
      $(targetId).show();
    });
  });
});

配套 CSS（增强交互反馈）：

.inactive { opacity: 0.6; cursor: not-allowed; }
label { 
  display: inline-block; 
  margin-right: 12px; 
  padding: 4px 8px; 
  border-radius: 4px; 
  background: #f5f5f5; 
}
.content-panel { 
  margin-top: 12px; 
  padding: 12px; 
  border-left: 3px solid #007bff; 
  background: #f8f9fa; 
}

⚠️ 注意事项

• 避免 toggle() 直接滥用：toggle() 依赖元素当前 display 值判断，易受 CSS 干扰；显式调用 show()/hide() 更可控。
• 性能优化：使用 .filter(':checked') 比循环遍历更高效；缓存 $checkboxes 和 $panels 避免重复 DOM 查询。
• 扩展建议：如需支持“全选/反选”，可额外添加一个主控 checkbox，并绑定 change 事件同步子项状态。
• 无障碍增强：为 添加 for 属性（关联 id）或确保 在 内嵌套，保障可访问性。

该方案完全脱离本地存储，状态由 DOM 实时驱动，简洁可靠，适用于大多数多区域切换场景。