两个表格切换显示异常求助：点击按钮后表格未及时切换

问题根源 #

1. 按钮type拼写错误：按钮的type="botton"是拼写错误，正确应为type="button"，错误的type可能导致浏览器无法正确识别按钮行为。
2. switchClass依赖jQuery UI：你使用的switchClass是jQuery UI的专属方法，如果页面没有引入jQuery UI库，这个方法不会生效，导致类切换失败，表格无法显示/隐藏。
3. CSS规则不完整：仅定义了table.invisible，但没有明确visible类的显示规则，可能导致切换类后样式不生效。

修复方案 #

1. 修正按钮HTML #

把按钮的type="botton"改为type="button"：

<div class="col-md-2">
  <button type="button" id="815show" class="btn-success btn btn-md visible">8-15-></button>
  <button type="button" id="17show" class="btn-success btn btn-md invisible"><-1-7</button>
</div>

2. 替换switchClass为原生jQuery方法（无需jQuery UI） #

改用addClass/removeClass来切换类，这些是原生jQuery支持的方法，不需要额外引入UI库：

$(document).ready(function() {
  $("#815show").click(function () {
    // 切换按钮可见性
    $(this).removeClass("visible").addClass("invisible");
    $("#17show").removeClass("invisible").addClass("visible");
    // 切换表格
    $("#17").removeClass("visible").addClass("invisible");
    $("#815").removeClass("invisible").addClass("visible");
  });

  $("#17show").click(function () {
    // 切换按钮可见性
    $(this).removeClass("visible").addClass("invisible");
    $("#815show").removeClass("invisible").addClass("visible");
    // 切换表格
    $("#815").removeClass("visible").addClass("invisible");
    $("#17").removeClass("invisible").addClass("visible");
  });
});

如果需要淡入淡出的动画效果，可以用fadeOut和fadeIn：

$(document).ready(function() {
  $("#815show").click(function () {
    $(this).toggleClass("visible invisible");
    $("#17show").toggleClass("visible invisible");
    $("#17").fadeOut(200, function() {
      $("#815").fadeIn(200);
    });
  });

  $("#17show").click(function () {
    $(this).toggleClass("visible invisible");
    $("#815show").toggleClass("visible invisible");
    $("#815").fadeOut(200, function() {
      $("#17").fadeIn(200);
    });
  });
});

3. 完善CSS规则 #

确保visible和invisible类能正确控制表格和按钮的显示：

/* 表格显示控制 */
table.invisible {
  display: none !important;
}
table.visible {
  display: table !important;
}

/* 按钮显示控制 */
.btn.invisible {
  display: none !important;
}
.btn.visible {
  display: inline-block !important;
}

额外提示 #

• 避免使用纯数字开头的ID（虽然HTML5允许），可以改为类似table-17、btn-815show这样的命名，更规范且避免潜在问题。
• 如果坚持使用switchClass，需要在页面中先引入jQuery库，再引入jQuery UI库及对应的CSS样式文件。

内容的提问来源于stack exchange，提问作者Alan Bell