时间戳

首页 > 解决方案 > 如何为单页应用程序重新排列 div

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

问题描述

我正在构建一个单页网络应用程序。在这个文件中，我希望在启动时显示一个特定的 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>

标签： javascripthtmlcss

解决方案

使用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>

推荐阅读