Question

我在一个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服务结果将当前页面更改为另一页面，例如，如果我的webservice返回＆＃34; 3＆＃34;我的当前页面将隐藏，第三页将打开。如何制作后退按钮？我试图做出像;但它不起作用，因为所有这些都在同一个html文件中

<button onclick="goBack()">Go Back</button>

<script>
function goBack() {
    window.history.back();
}
</script>

Answer 1

由于您并未真正更改网页，因此无法使用。在切换变量然后在开关上执行与更改页面相反的操作之前，您需要保留对前一页/当前页的引用。

类似的东西：

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 History API或类似的设置来管理您的网址历史记录（并在您的情况下伪造它）。

Answer 2

这可能是你预期的行为。

＆＃13;

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

＆＃13;

如何在同一个html页面中制作后退按钮

2 个答案: