如何使后退按钮在同一个html页面

How to make a back button in a same html page

本文关键字：同一个 html 页面 按钮 何使      更新时间：2023-09-26

我在一个html页面中有如下代码的页面。

<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
</head>
<body>
  <div id="Page1">
    <p>Hi hello how are you This is page 1 </p>
  </br>
    <a href="#" onclick="return show('Page2','Page1');">
  <button>Next Page</button>
  </a>
  </div>
  <div id="Page2" style="display:none">
   <p> I'm fine thanks Thıs is page 2 </p>
</br>
    <a href="#" onclick="return show('Page3','Page2');">
  <button>Next Page</button>
</a>
  </div>
<div id="Page3" style="display:none">
   <p>What is your name Thıs is page 3 </p>
</br>
    <button>Submit</button>
  </div>
</body>
</html>

我想做一个后退按钮，但是有一个小问题。我用我的web服务结果将当前页面更改为另一个页面，例如，如果我的web服务返回"3"，我的当前页面将隐藏，第三个页面将打开。如何制作后退按钮?我试着模仿;但它不起作用，因为它们都在同一个html文件

<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
    window.history.back();
}
</script>

这不起作用，因为您并没有真正更改页面。你需要在一个变量中保持对前一页/当前页的引用，然后在开关上执行与更改页面相反的操作。

类似:

var previous;
var current;
function show(shown, hidden) {
  previous = hidden;
  current= shown
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
function goBack() {
  show(previous, current)
}

注意，这不会处理浏览器的后退按钮。这是有可能的，但它会变得更加复杂，因为你需要利用HTML5历史API或一些类似的设置，可以为你管理url历史。

可能这就是你所期望的行为。

<html>
<head>
  <script>
    var oldPages = [],
      shownPage;
    function toggleShow(shown, hidden) {
      if (shown && hidden) {
        oldPages.push(hidden);
        shownPage = shown;
      } else {
        hidden = shownPage;
        shownPage = shown = oldPages[oldPages.length - 1];
        oldPages.pop();
      }
      if (!shown) {
        return;
      }
      document.getElementById(shown).style.display = 'block';
      document.getElementById(hidden).style.display = 'none';
      return false;
    }
  </script>
</head>
<body>
  <div id="Page1">
    <p>Hi hello how are you This is page 1</p>
    </br>
    <a href="#" onclick="return toggleShow('Page2','Page1');">
      <button>Next Page</button>
    </a>
  </div>
  <div id="Page2" style="display:none">
    <p>I'm fine thanks Thıs is page 2</p>
    </br>
    <a href="#" onclick="return toggleShow('Page3','Page2');">
      <button>Next Page</button>
    </a>
  </div>
  <div id="Page3" style="display:none">
    <p>What is your name Thıs is page 3</p>
    </br>
    <button>Submit</button>
  </div>
  <button onclick="toggleShow()">back!</button>
</body>
</html>

相关文章：