'后退按钮'恢复到以前的页面状态？

Question

我有一个主页，有广泛的jQuery ...隐藏和显示基于标签点击等div。在显示的div中有链接到其他页面回发和获取新页面。

现在我希望页面上的“后退”按钮在用户点击它时返回到页面的上一个状态。 因此，如果他们显示了Sell_your_books div并且在点击链接时选择了“Sell_your_books标签”，我希望有一个后退按钮进入主页，显示Sell_your_books div并选择'Sell_your_books tab'。

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

谢谢

Answer 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按钮history.go(-1)) ，它将返回先前选择的任何哈希并再次触发哈希更改事件。

更多细节

Answer 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是否有正确的值。