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

Question

我有一个包含几个部分的页面，如下面的代码片段，以及一个隐藏或显示不同部分的菜单。

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

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

$("#menu li:nth-child(1)").unbind("click").bind("click", function() {
  $("#section1").css("display", "block");
  $("#section2").css("display", "none");
  $("#section3").css("display", "none");
});
$("#menu li:nth-child(2)").unbind("click").bind("click", function() {
  $("#section1").css("display", "none");
  $("#section2").css("display", "block");
  $("#section3").css("display", "none");
});
$("#menu li:nth-child(3)").unbind("click").bind("click", function() {
  $("#section1").css("display", "none");
  $("#section2").css("display", "none");
  $("#section3").css("display", "block");
});

#menu li {
  display: inline-block;
}

#section1 {
  display: block;
  background-color: #d33;
}

#section2 {
  display: none;
  background-color: #3d3;
}

#section3 {
  display: none;
  background-color: #33d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
</ul>

<div id="section1">
  Section 1
</div>

<div id="section2">
  Section 2
  <form><button>Submit</button></form>
</div>

<div id="section3">
  Section 3
</div>

Answer 1

如果您可以使用 AJAX 来发布表单数据，是的，您可以停止重新加载页面并显示一些好的内容。防止默认事件发生是大多数地方常用的方法:

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

上面是下面代码段中包含的通用代码:

$("#menu li:nth-child(1)").unbind("click").bind("click", function() {
  $("#section1").css("display", "block");
  $("#section2").css("display", "none");
  $("#section3").css("display", "none");
});
$("#menu li:nth-child(2)").unbind("click").bind("click", function() {
  $("#section1").css("display", "none");
  $("#section2").css("display", "block");
  $("#section3").css("display", "none");
});
$("#menu li:nth-child(3)").unbind("click").bind("click", function() {
  $("#section1").css("display", "none");
  $("#section2").css("display", "none");
  $("#section3").css("display", "block");
});

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

#menu li {
  display: inline-block;
}

#section1 {
  display: block;
  background-color: #d33;
}

#section2 {
  display: none;
  background-color: #3d3;
}

#section3 {
  display: none;
  background-color: #33d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
</ul>

<div id="section1">
  Section 1
</div>

<div id="section2">
  Section 2
  <form><button>Submit</button></form>
</div>

<div id="section3">
  Section 3
</div>