Question

基本上，我的网站有多个页面。我通过显示和隐藏位于一个html文件上的div来创建这些多个页面。我遇到的问题是浏览器中的后退和前进按钮不能使用此方法。如何将这些按钮绑定到我的jQuery显示/隐藏事件，以便当我，例如，单击浏览器中的后退按钮，当前div隐藏和前一个div显示？这甚至可以简单地使用jQuery，HTML和CSS吗？

Answer 1

我想我对你在这里想要完成的事情有了一般性的认识。在下面的示例中，我使用.click()个事件作为获取当前页码的触发器，然后在数字中添加或减去一个以获取目标的ID 页面，将其转换为字符串，然后根据该信息隐藏/显示页面。

＆＃13;

$(document).ready(function() {
  var page = 1; //current page
  $('#pg2').hide();
  $('#pg3').hide();
  $('#fwd').click(function() {
    var currentPage = "#pg" + page.toString();
    $(currentPage).hide();
    page++;
    var nextPage = "#pg" + page.toString();
    $(nextPage).show();
  });
  $('#bck').click(function() {
    var currentPage = "#pg" + page.toString();
    $(currentPage).hide();
    page--;
    var nextPage = "#pg" + page.toString();
    $(nextPage).show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bck">back</button>
<button id="fwd">forward</button>
<div id="pg1"><p>page 1</p></div>
<div id="pg2"><p>page 2</p></div>
<div id="pg3"><p>page 3</p></div>

＆＃13;

隐藏当前div并在浏览器后退按钮上单击显示上一个div

1 个答案: