Tab控件内Toggle Switch切换数据显示异常及按钮控制问题求助

一、修复测试代码的切换异常 #

你遇到的问题根源是给所有按钮绑定了两个独立的点击事件，点击任意按钮时，两个事件会同时触发，导致#current和#all两个DIV都执行toggle()，最终表现为所有内容被隐藏。

修复后的测试代码（精准绑定事件） #

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 仅给.current-btn绑定事件，控制#current
      $(".current-btn").click(function() {
        $("#current").toggle();
      });
      // 仅给.all-btn绑定事件，控制#all
      $(".all-btn").click(function() {
        $("#all").toggle();
      });
    });
  </script>
</head>
<body>
  <button class="current-btn">Toggle Current Plots DIV</button>
  <button class="all-btn">Toggle all plots DIV</button>
  <hr>

  <div id="current">
    <p>This is a paragraph with little content.</p>
    <p>Paragraph 1 - Current Plots.</p>
    <hr>
  </div>

  <div id="all">
    <p>This is another small paragraph.</p>
    <p>Paragraph 2 - All Plots</p>
    <hr>
  </div>
</body>
</html>

更优雅的实现（数据属性关联） #

通过data-target属性将按钮与目标DIV绑定，避免重复写事件：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        const targetId = $(this).data("target");
        $(`#${targetId}`).toggle();
      });
    });
  </script>
</head>
<body>
  <button data-target="current">Toggle Current Plots DIV</button>
  <button data-target="all">Toggle all plots DIV</button>
  <hr>

  <div id="current">
    <p>This is a paragraph with little content.</p>
    <p>Paragraph 1 - Current Plots.</p>
    <hr>
  </div>

  <div id="all">
    <p>This is another small paragraph.</p>
    <p>Paragraph 2 - All Plots</p>
    <hr>
  </div>
</body>
</html>

二、完整实现Tab控件+Plots标签页切换功能 #

针对你需要的三个标签页（Plots/People/Address）+ Plots内数据筛选需求，以下是完整的可运行代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    /* Tab基础样式 */
    .tab-container {
      width: 80%;
      margin: 20px auto;
    }
    .tab-buttons {
      display: flex;
      border-bottom: 1px solid #ccc;
    }
    .tab-btn {
      padding: 10px 20px;
      border: none;
      background: #f1f1f1;
      cursor: pointer;
      margin-right: 5px;
      border-radius: 5px 5px 0 0;
    }
    .tab-btn.active {
      background: #ccc;
      font-weight: bold;
    }
    .tab-content {
      padding: 20px;
      border: 1px solid #ccc;
      border-top: none;
      border-radius: 0 0 5px 5px;
    }
    .tab-pane {
      display: none;
    }
    .tab-pane.active {
      display: block;
    }

    /* Toggle Switch样式 */
    .toggle-group {
      margin-bottom: 20px;
    }
    .toggle-switch {
      display: inline-block;
      margin-right: 15px;
      cursor: pointer;
    }
    .plot-content {
      display: none;
    }
    .plot-content.active {
      display: block;
    }
  </style>
  <script>
    $(document).ready(function() {
      // Tab切换逻辑
      $(".tab-btn").click(function() {
        // 清空所有激活状态
        $(".tab-btn").removeClass("active");
        $(".tab-pane").removeClass("active");
        // 激活当前Tab
        $(this).addClass("active");
        const targetTab = $(this).data("tab");
        $(`#${targetTab}`).addClass("active");
      });

      // Plots标签页内的Toggle切换逻辑
      $(".toggle-switch input").click(function() {
        // 清空所有Plot内容的激活状态
        $(".plot-content").removeClass("active");
        // 显示选中的Plot内容
        const targetPlot = $(this).val();
        $(`#${targetPlot}-plots`).addClass("active");
      });

      // 默认激活第一个Tab和第一个Toggle选项
      $(".tab-btn:first").click();
      $(".toggle-switch input:first").click();
    });
  </script>
</head>
<body>
  <div class="tab-container">
    <div class="tab-buttons">
      <button class="tab-btn" data-tab="plots">Plots</button>
      <button class="tab-btn" data-tab="people">People</button>
      <button class="tab-btn" data-tab="address">Address</button>
    </div>
    <div class="tab-content">
      <!-- Plots标签页（带Toggle切换） -->
      <div id="plots" class="tab-pane">
        <div class="toggle-group">
          <label class="toggle-switch">
            <input type="radio" name="plot-toggle" value="current">
            Current Plots
          </label>
          <label class="toggle-switch">
            <input type="radio" name="plot-toggle" value="all">
            All Plots
          </label>
        </div>
        <div id="current-plots" class="plot-content">
          <h3>Current Plots Data</h3>
          <p>当前地块列表：地块A、地块B</p>
        </div>
        <div id="all-plots" class="plot-content">
          <h3>All Plots Data</h3>
          <p>所有地块列表：地块A、地块B、地块C、地块D</p>
        </div>
      </div>

      <!-- People标签页（纯文本） -->
      <div id="people" class="tab-pane">
        <h3>People List</h3>
        <ul>
          <li>张三</li>
          <li>李四</li>
          <li>王五</li>
        </ul>
      </div>

      <!-- Address标签页（纯文本） -->
      <div id="address" class="tab-pane">
        <h3>Address Information</h3>
        <p>地址：XX市XX区XX街道XX号</p>
      </div>
    </div>
  </div>
</body>
</html>

关键实现说明 #

1. Tab切换：通过data-tab属性关联按钮与标签页内容，利用active类控制显示/隐藏；
2. Plots内筛选：使用单选按钮组（同一name确保互斥），点击时切换对应内容的active类；
3. 样式控制：通过CSS的display: none/block实现状态切换，避免重复操作DOM。

内容的提问来源于stack exchange，提问作者Helen Mabey