'后退按鈕'恢復到以前的頁面狀態？

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