使用jQuery实现动态内容切换失效，无法恢复原始内容求助

嘿，我懂你折腾好几个小时的烦躁！现在你能切换到注册内容，但切不回原来的管理内容对吧？咱们先捋清楚代码问题，一步步给你搞定它。

首先，你的HTML有个小疏漏：按钮标签没闭合，先修正一下，不然可能触发奇怪的页面行为：

<html>
  <button id="btn_nav_register">注册</button>
  <button id="btn_nav_manage">管理</button>
  <div id="content">
    <div id="manage">original content</div>
  </div>
  <div id="register" style="display:none;">second content</div>
</html>

核心问题应该是你当前的jQuery代码只处理了加载新内容的逻辑，完全没写恢复原始内容的逻辑。我给你两种实用解决方案，选适合你场景的就行：

方案1：切换元素的显示/隐藏（推荐） #

这种方法最省心，因为原始内容并没有被移除，只是切换显示状态，天然支持一键恢复：

$(document).ready(function() {
  // 点击「注册」按钮：隐藏原始内容，显示注册内容
  $('#btn_nav_register').click(function() {
    $('#manage').hide();
    $('#register').appendTo('#content').show();
  });
  
  // 点击「管理」按钮：隐藏注册内容，恢复显示原始内容
  $('#btn_nav_manage').click(function() {
    $('#register').hide().appendTo('body'); // 移回原位置或直接隐藏都可以
    $('#manage').show();
  });
});

如果愿意微调HTML结构，把两个内容块都放进#content里，代码会更简洁：

<html>
  <button id="btn_nav_register">注册</button>
  <button id="btn_nav_manage">管理</button>
  <div id="content">
    <div id="manage">original content</div>
    <div id="register" style="display:none;">second content</div>
  </div>
</html>

对应的jQuery代码：

$(document).ready(function() {
  $('#btn_nav_register').click(function() {
    $('#manage').hide();
    $('#register').show();
  });
  
  $('#btn_nav_manage').click(function() {
    $('#register').hide();
    $('#manage').show();
  });
});

方案2：保存原始内容再恢复 #

如果你确实需要完全替换#content的内容（比如内容是动态生成的），那就要提前把原始内容存进变量，需要恢复的时候再放回去：

$(document).ready(function() {
  // 页面加载时，把原始内容存入变量备份
  const originalContent = $('#content').html();
  
  // 切换到注册内容
  $('#btn_nav_register').click(function() {
    $('#content').html($('#register').html());
  });
  
  // 恢复原始内容
  $('#btn_nav_manage').click(function() {
    $('#content').html(originalContent);
  });
});

最后提醒一句：记得在你的jQuery代码之前，确保已经引入了jQuery库文件哦！

内容的提问来源于stack exchange，提问作者Jeremy DelaCruz