如何简洁地临时将提交按钮转为users-table标签切换器？

直接利用Bootstrap标签组件的内置方法，无需手动修改标签状态，一步完成切换：

• 核心思路：使用Bootstrap官方提供的tab('show')方法触发标签切换，它会自动处理导航标签的激活状态和内容面板的切换，彻底解决标签重叠、导航未切换的问题。
• 结合jQuery的one()方法给临时状态的按钮绑定一次性点击事件，避免重复触发。

代码示例 #

假设你的提交按钮ID是submit-btn，导航栏中指向用户表格标签的a标签ID是users-tab：

// 表单提交成功后，转换按钮状态并绑定点击事件
$('#submit-btn')
  .removeClass('btn-primary')
  .addClass('btn-success')
  .text('User added!')
  // 绑定一次性点击事件，触发标签切换
  .one('click', function() {
    // 调用Bootstrap标签方法切换到用户表格标签
    $('#users-tab').tab('show');
  });

// 8秒后恢复按钮原始状态
setTimeout(function() {
  $('#submit-btn')
    .removeClass('btn-success')
    .addClass('btn-primary')
    .text('Submit');
}, 8000);

对应的HTML结构参考 #

确保导航标签和内容面板符合Bootstrap的规范：

<!-- 导航标签 -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" id="users-tab" data-bs-toggle="tab" href="#users-table">用户表格</a>
  </li>
  <!-- 其他标签项 -->
</ul>

<!-- 标签内容面板 -->
<div class="tab-content">
  <div class="tab-pane fade" id="users-table">
    <!-- 用户表格内容 -->
  </div>
  <!-- 其他内容面板 -->
</div>

说明 #

1. 如果使用Bootstrap 3版本，只需把data-bs-toggle改成data-toggle，tab('show')方法的调用完全一致。
2. one()方法确保点击事件只触发一次，避免按钮恢复原始状态后仍保留切换逻辑。
3. tab('show')方法会自动处理所有标签状态更新，包括给激活的导航标签添加active类，显示对应的内容面板，无需手动操作DOM。

内容的提问来源于stack exchange，提问作者Sergey Zolotarev