'bouton retour' pour revenir à l'état précédent d'une page?

Question

Je dispose d'une page d'accueil qui contient beaucoup de jQuery... Masquer et afficher des divs en fonction des clics sur les onglets, etc. Dans les divs affichés, il y a des liens vers d'autres pages qui effectuent un retour en arrière et affichent la nouvelle page.

Maintenant, je voudrais un bouton 'retour' sur la page pour revenir à l'état précédent de la page lorsque l'utilisateur a cliqué dessus. Donc, s'ils avaient la div Sell_your_books affichée et l'onglet 'tab Sell_your_books' sélectionné lorsqu'ils ont cliqué sur le lien, j'aimerais avoir un bouton de retour pour revenir à la page d'accueil avec la div Sell_your_books affichée et l'onglet 'tab Sell_your_books' sélectionné.

Je sais que je devrai analyser (POST) une variable vers la page d'accueil pour y parvenir avec php, mais je ne suis pas sûr de la bonne manière de le mettre en œuvre.

Merci

Answer 1

Utilisez des hyperliens de hachage et l'événement hashchange. En jQuery :

$(window).on('hashchange',function() {
    var hash = location.hash.substring(1); // supprimer le symbole # initial
    // exécutez maintenant le code en fonction de la valeur de 'hash'
});

HTML

fonction A
fonction B

Maintenant, chaque fois que l'utilisateur clique sur le bouton "retour" du navigateur (ou sur un bouton HTML qui déclenche history.go(-1)), il reviendra à la hashe précédemment sélectionnée et déclenchera à nouveau l'événement hashchange.

PLUS DE DÉTAILS

Answer 2

Créez un champ de saisie caché et remplissez-le avec l'onglet actif actuel.

 ..

Un peu de jQuery pour définir la bonne valeur:

$( VOTRE SELECTEUR D'ONGLET ).on('click', function() { 
 $('input[name=currentTab]').val( $(this).attr('id') ); 
});

Dans le script PHP qui gère vos données, vous pouvez créer un lien de retour de cette manière:

Si vous appelez maintenant votre site avec des onglets via le lien de retour, vous pouvez créer un événement document.ready supplémentaire, qui définira l'onglet actif sur le paramètre PHP $_GET.

 <?php
  if( isset($_GET['tab']) && $_GET['tab'] != '' ) {
 ?>
  jQuery(document).ready( function() {

   var tab = $('#'+ <?=htmlspcialchars( $_GET['tab'] )?>);
   if( tab.length <= 0 ) return false; //élément non trouvé

   //onglet actif
   tab.toggle('click'); //cliquez ou faites quelque chose d'autre pour activer l'onglet actuel

  });
 <?php 
  }
 ?>

Attention: Méfiez-vous des attaques XSS (Cross-Site-Scripting), donc vérifiez vos $_POST et $_GET pour des valeurs correctes.