'后退按钮'恢复到页面的先前状态？答案

【问题标题】：'back button' to revert to previous state of a page?'后退按钮'恢复到页面的先前状态？
【发布时间】：2013-06-19 18:15:39
【问题描述】：

我有一个包含大量 jQuery 的主页...隐藏和显示基于点击选项卡等的 div。在显示的 div 中有指向其他页面的链接，这些页面可以回发并获取新页面。

现在我希望页面上的“后退”按钮可以在用户单击它时返回到页面的先前状态。因此，如果他们在单击链接时显示了 Sell_your_books div 并选择了“Sell_your_books 选项卡”，我希望有一个返回按钮返回主页，并显示 Sell_your_books div 并选择了“Sell_your_books 选项卡”。

我知道我必须将一个变量解析（POST）到主页才能使用 php 实现这一点，但我不确定实现它的正确方法。

谢谢

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

使用哈希超链接和hashchange 事件。在 jQuery 中：

$(window).on('hashchange',function() {
    var hash = location.hash.substring(1); // strip the leading # symbol
    // now run code based on whatever the value of 'hash' is
});

HTML

<a href="#hash1">function A</a>
<a href="#hash2">function B</a>

现在，每当用户单击浏览器的“后退”按钮（或触发history.go(-1)) 的 HTML 按钮时，它将返回到之前选择的任何哈希值并再次触发 hashchange 事件。

MORE DETAILS

【讨论】：

谢谢，这是更简单的快速修复方法。浏览器默认滚动直到找到该 div...我该如何阻止它？

【解决方案2】：

创建一个隐藏的输入字段并用当前活动选项卡填充此字段。

<form>
 ..
 <input type="hidden" name="currentTab" value="" />

</form>

一点 jQuery 来设置正确的值：

$( YOUR TAB SELECTOR ).on('click', function() { 
 $('input[name=currentTab]').val( $(this).attr('id') ); 
});

在处理数据的 PHP 脚本中，您可以像这样创建反向链接：

<?php

 if( isset($_POST['currentTabe']) && $_POST['currentTab'] != '' ) {
   $backLink = "your_page.php?tab=" . $_POST['currentTab'];
 }

?>

如果您现在通过反向链接调用带有标签的网站，您可以创建一个额外的 document.ready 事件，该事件将活动标签设置为 PHP $_GET Parm。

<script type="text/javascript">
 <?php
  if( isset($_GET['tab']) && $_GET['tab'] != '' ) {
 ?>
  jQuery(document).ready( function() {

   var tab = $('#'+ <?=htmlspcialchars( $_GET['tab'] )?>);
   if( tab.length <= 0 ) return false; //element not found

   //active tab
   tab.toggle('click'); //click or do something else to activate the current tab

  });
 <?php 
  }
 ?>
</script>

注意：小心 XSS（跨站点脚本），因此请检查您的 $_POST 和 $_GET 以获取正确的值。

【讨论】：