Question

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

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

是否有一种简便的方法来执行此操作？或者我需要在JS中做一些事情，在表单中有一个隐藏的输入，告诉它提交后应该显示哪个部分？

任何帮助或建议，将不胜感激。

const value = this.state.values[id]

$("#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;
}

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>

Answer 2

您可以使用Cookie或本地存储。尝试这样的事情：

$("#menu li:nth-child(1)").unbind("click").bind("click", function() {
  $("#section1").css("display", "block");
  $("#section2").css("display", "none");
  $("#section3").css("display", "none");
  
  // localstorage solution
  localStorage.menu_selection = '#section1';

  // alternatively, document.cookie is also
  // persistent across page refreshing
  
});

// add something like this for when the page loads
// this is a shorthand for 'document ready'
$(function () {

  var menu_selection = localStorage.menu_selection;

  // this assumes that the default display is 'none'
  $(menu_selection).css("display", "block");

});

在页面刷新期间，本地存储在浏览器中是持久的。另外，您可以使用cookie，但是对于每个请求，它们都会发送到服务器，而您可能不需要。

Answer 3

您可以使用preventDefault阻止提交表单。还有一种更简单的方法来隐藏和显示您的部分。

$("#menu > li").on("click", function() {
    var clickedIndex = $(this).index();

    $(".section").hide().eq(clickedIndex).show();
});

$(".your-button").on("click", function(e) {
  var sectionIndex = $(this).parents(".section").index();
  
   $(".section").hide().eq(sectionIndex + 1).show();
  
  e.preventDefault();
});

#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 class="sections">
  <div class="section" id="section1">
    Section 1
  </div>

  <div class="section" id="section2">
    Section 2
    <form><button class="your-button">Submit</button></form>
  </div>

  <div class="section" id="section3">
    Section 3
  </div>
</div>

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

3 个答案: