& # 39;返回按钮# 39;将页面恢复到以前的状态

'back button' to revert to previous state of a page?

本文关键字：状态 恢复 返回 按钮      更新时间：2023-09-26

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

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

我知道我将不得不解析(POST)一个变量的主页实现这一点与php，但我不确定正确的方式来实现它。

谢谢

使用散列超链接和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事件。

详细

创建一个隐藏的输入字段，并将其填充为当前活动选项卡。

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

用一点jQuery设置正确的值:

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

在处理你的数据的PHP-Script中，你可以像这样创建一个反向链接:

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

如果你现在通过反向链接调用你的站点，你可以创建一个额外的文档。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的正确值。

相关文章：