Javascript 刷新或表单提交后显示页面的特定部分

我有一个页面，里面有几个部分，如下面的代码片段，还有一个菜单，隐藏或显示不同的部分

但是，我在一个部分上有一个表单，提交时会刷新页面，因此显示的部分会返回到第一个部分，但我希望将其保留在提交from的部分上

有没有一个简单的方法可以做到这一点，或者我需要在JS中做些什么，在表单中有一个隐藏的输入，告诉它在提交后应该显示哪个部分

$（“#菜单li:n子项（1）”）。解除绑定（“单击”）。绑定（“单击”，函数（）{
$（“第1节”）.css（“显示”、“块”）；
$（“第2节”）.css（“显示”、“无”）；
$（“第3节”）.css（“显示”、“无”）；
});
$（“#菜单li:n子项（2）”）。解除绑定（“单击”）。绑定（“单击”，函数（）{
$（“第1节”）.css（“显示”、“无”）；
$（“第2节”）.css（“显示”、“块”）；
$（“第3节”）.css（“显示”、“无”）；
});
$（“#菜单li:n子项（3）”）。解除绑定（“单击”）。绑定（“单击”，函数（）{
$（“第1节”）.css（“显示”、“无”）；
$（“第2节”）.css（“显示”、“无”）；
$（“第3节”）.css（“显示”、“块”）；
});
#菜单li{
显示：内联块；
}
#第一节{
显示：块；
背景色：#d33；
}
#第2节{
显示：无；
背景色：#3d3；
}
#第三节{
显示：无；
背景色：#33d；
}


菜单1
菜单2
菜单3

第一节
第二节
提交
第三节
如果可以使用AJAX发布表单数据，则可以停止重新加载页面并显示一些好的内容。防止默认事件发生是大多数地方使用的常见方法：

$("form").submit(function (e) {
  e.preventDefault();
  $.ajax({
    type: $(this).attr("method"),
    url: $(this).attr("action"),
    data: $(this).serialize()
  });
});

以上是包含在下面代码段中的通用代码：


$（“#菜单li:n子项（1）”）。解除绑定（“单击”）。绑定（“单击”，函数（）{
$（“第1节”）.css（“显示”、“块”）；
$（“第2节”）.css（“显示”、“无”）；
$（“第3节”）.css（“显示”、“无”）；
});
$（“#菜单li:n子项（2）”）。解除绑定（“单击”）。绑定（“单击”，函数（）{
$（“第1节”）.css（“显示”、“无”）；
$（“第2节”）.css（“显示”、“块”）；
$（“第3节”）.css（“显示”、“无”）；
});
$（“#菜单li:n子项（3）”）。解除绑定（“单击”）。绑定（“单击”，函数（）{
$（“第1节”）.css（“显示”、“无”）；
$（“第2节”）.css（“显示”、“无”）；
$（“第3节”）.css（“显示”、“块”）；
});
$（“表格”）。提交（功能（e）{
e、 预防默认值（）；
$.ajax({
类型：$（this.attr（“方法”），
url:$（this.attr（“操作”），
数据：$（this）.serialize（）
});
});
#菜单li{
显示：内联块；
}
#第一节{
显示：块；
背景色：#d33；
}
#第2节{
显示：无；
背景色：#3d3；
}
#第三节{
显示：无；
背景色：#33d；
}


菜单1
菜单2
菜单3

第一节
第二节
提交
第三节
您可以使用cookie或本地存储。试着这样做：


$（“#菜单li:n子项（1）”）。解除绑定（“单击”）。绑定（“单击”，函数（）{
$（“第1节”）.css（“显示”、“块”）；
$（“第2节”）.css（“显示”、“无”）；
$（“第3节”）.css（“显示”、“无”）；
//本地存储解决方案
localStorage.menu_selection='#section1'；
//或者，也可以使用document.cookie
//持续跨页刷新
});
//在页面加载时添加类似的内容
//这是“文档准备就绪”的缩写
$（函数（）{
var menu_selection=localStorage.menu_selection；
//这假定默认显示为“无”
$（菜单选择）.css（“显示”、“块”）；
});您可以使用preventDefault停止提交表单。还有一种更容易隐藏和显示分区的方法


$（“#菜单>li”）。在（“单击”，函数（）{
var clickedIndex=$（this.index（）；
$（“.section”）.hide（）.eq（clickedIndex.show（）；
});
$（“.your button”）。单击（“click”，函数（e）{
var sectionIndex=$（this.parents（“.section”）.index（）；
$（“.section”）.hide（）.eq（sectionIndex+1.show（）；
e、 预防默认值（）；
});
#菜单li{
显示：内联块；
}
#第一节{
显示：块；
背景色：#d33；
}
#第2节{
显示：无；
背景色：#3d3；
}
#第三节{
显示：无；
背景色：#33d；
}


菜单1
菜单2
菜单3

第一节
第二节
提交
第三节
谢谢你的回答，因为这段代码都是由php生成的，所以比这段代码中的内容要多得多，但我将尝试一些不同的东西，但使用ajax，看看我的进展如何。@Paddyhalihan当然，让我知道。我擅长LAMP和jQuery，所以我可以指导您<代码>：）
如果有帮助，请接受我的答案（5分钟内）。