JQuery中Div ID字符串对比、局部更新及页面重载默认显示问题

让我们一步步拆解并修复你的问题，先搞定div实时更新的问题，再解决页面刷新后默认加载正确div的需求：

一、修复div内容无需手动刷新即可更新的问题 #

先看你原代码里的几个关键错误，这也是导致需要手动刷新的核心原因：

1. innerhtml的写法错误：JavaScript中DOM元素的属性是innerHTML（注意H是大写），而且它是属性不是方法，不能像函数一样调用，应该用赋值操作。
2. 变量引用错误：你写了innerhtml('mycontent')，这里的引号会把mycontent当成字符串字面量，而不是你定义的变量。
3. 重复覆盖内容：你先设置了innerHTML，后面又调用load方法，这会覆盖之前的内容，而且load的URL格式也不正确（没有正确定位到页面内的div）。

修复后的update_div函数（结合jQuery简化操作，更可靠）：

function _(x) { return document.getElementById(x); }

// 优化toggle函数，用jQuery简化隐藏/显示逻辑
function toggle(mydiv){
  // 一次性隐藏所有page相关div
  $('#page1_id, #page2_id, #page3_id').hide();
  // 显示目标div
  $(`#${mydiv}`).show();
}

function update_div(mydiv) {
  toggle(mydiv);
  
  if (mydiv === "page2_id") {
    // 直接用PHP输出的新内容更新div，无需刷新
    const mycontent = '<?php echo $newcontent; ?>';
    // 用jQuery的html方法直接替换内容，实时生效
    $(`#${mydiv}`).html(mycontent);
  } else {
    // 如果是page1或page3，需要加载原始内容的话，用正确的load格式
    // 这里加载当前页面中对应div的子元素，避免重复加载整个页面
    $(`#${mydiv}`).load(`${window.location.href} #${mydiv} > *`);
  }
}

二、解决页面刷新后默认加载正确div的问题 #

要实现刷新后默认加载page1_id或者当前激活的div，我们可以用localStorage来保存用户最后激活的div状态，页面初始化时读取这个状态即可：

1. 在update_div中保存激活状态 #

修改update_div函数，每次切换div时把当前ID存入localStorage：

function update_div(mydiv) {
  toggle(mydiv);
  
  // 保存当前激活的div到本地存储
  localStorage.setItem('activeDiv', mydiv);
  
  if (mydiv === "page2_id") {
    const mycontent = '<?php echo $newcontent; ?>';
    $(`#${mydiv}`).html(mycontent);
  } else {
    $(`#${mydiv}`).load(`${window.location.href} #${mydiv} > *`);
  }
}

2. 页面初始化时恢复状态 #

在DOM加载完成后，读取localStorage里的状态，默认加载page1_id：

$(document).ready(function() {
  // 获取保存的激活div，没有的话默认用page1_id
  const activeDiv = localStorage.getItem('activeDiv') || 'page1_id';
  
  // 切换到目标div并更新内容
  toggle(activeDiv);
  update_div(activeDiv);
});

额外说明 #

• 如果不想用localStorage（比如希望关闭浏览器后恢复默认到page1），可以直接在初始化时固定调用toggle('page1_id')和update_div('page1_id')。
• 你原代码里的_(mydiv).load(...)写法有问题，jQuery的load方法需要正确的选择器来定位页面内的元素，比如$(selector).load(url + ' ' + targetSelector)，这样只会加载目标元素的内容，而不是整个页面。

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