javascript - 如何为单页应用程序重新排列 div

Question

我正在构建一个单页网络应用程序。在这个文件中，我希望在启动时显示一个特定的 div。也许用户会按下一个按钮，一个新的 div 将取代它。

现在，在这种情况下，我正在使用 js 隐藏一个 div 并显示另一个。问题是，新的 div 出现在页面的下方(因为它写在第一个 div 之后的 html 文件中)。

当用户在 div 之间来回导航时，我如何使用 javascript 简单地将一个 div 替换为另一个？这是可能的和推荐的吗？

/* JS
When #firstButton is pressed, replace div #first with div #second
When #secondButton is pressed, replace the div #second with div #first
*/

#second {
  visibility: hidden;
}

<div id="first">
  <h1>First Page</h1>
  <button id="firstButton">Go to second page</button>
</div>


<div id="second">
  <h1>Second Page</h1>
  <button id="secondButton">Go to first page</button>
</div>

Answer 1

使用 visibility: hidden 会导致您的元素仍然占用空间，这就是为什么您的“页面”似乎没有改变位置。

切换到 display: none，可以使用 jQuery 的 .show() 和 .hide() 轻松切换，如下所示:

$("#firstButton").on("click", function() {
  $("#first").hide();
  $("#second").show();
});

$("#secondButton").on("click", function() {
  $("#first").show();
  $("#second").hide();
});

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

<div id="first">
  <h1>First Page</h1>
  <button id="firstButton">Go to second page</button>
</div>

<div id="second" style="display: none;">
  <h1>Second Page</h1>
  <button id="secondButton">Go to first page</button>
</div>