代码之家 › 专栏 › 技术社区 › Paddy Hallihan

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

css html jquery javascript

Paddy Hallihan · 技术社区 · 7 年前

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

有没有一个简单的方法可以做到这一点,或者我需要在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>

3 回复 | 直到 5 年前

Praveen Kumar Purushothaman 7 年前

如果可以使用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>

Jeff Straney 7 年前

您可以使用cookies或localstorage。尝试以下操作:

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

});

Ozturk Can Gokkaya 7 年前

您可以使用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>