Electron自动刷新JS代码？jQuery实现Tab切换后复原问题排查

嘿，我之前也碰到过一模一样的情况！你的核心逻辑其实是对的，但问题大概率出在按钮的默认行为没有被阻止上——这是个很容易踩的小坑。

问题根源 #

如果你的导航按钮用的是原生<button>标签，它的默认type属性是submit，哪怕是在Electron的本地页面里，点击它也会触发页面的“伪刷新”，直接让页面回到初始状态（也就是你看到的home div重新显示、tasks div隐藏的情况）。

两种快速解决方法 #

• 方法1：给按钮指定type为button
  直接在HTML的按钮标签里加上type="button"，彻底禁用它的默认提交行为：

  <button id="tasksButton" type="button">Tasks</button>
  <button id="homeButton" type="button">Home</button>
  

• 方法2：在jQuery点击事件中阻止默认行为
  如果你不想修改HTML，可以在事件处理函数里通过事件对象阻止默认动作：

  $("#tasksButton").click(function(e){
    // 阻止按钮的默认提交行为
    e.preventDefault();
    $("#home").hide();
    $("#tasks").show();
  });
  
  $("#homeButton").click(function(e){
    e.preventDefault();
    $("#home").show();
    $("#tasks").hide();
  });
  

额外排查点 #

如果上面的方法没用，可以检查这两个地方：

• 你的按钮是不是嵌套在<form>标签里？如果是，哪怕按钮类型是button，有时候也会触发表单提交，这时候可以把按钮移出表单，或者在事件里加上e.stopPropagation()来阻止冒泡。
• 有没有其他代码不小心调用了location.reload()或者触发了页面重新加载的逻辑？可以在控制台监听beforeunload事件来排查。

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