JQuery conserve addClass stocké après le rechargement de page

Question

Je suis assez nouveau à JQuery et je travaille sur un menu basé sur le script Superfish. J'ai des problèmes pour conserver l'addClass sur le jeu d'éléments cliqué en cours lorsque je navigue à travers les liens.

Mon code:

JS

<script type="text/javascript"> 
jQuery.noConflict(); 
jQuery(document).ready(function(){ 

jQuery("ul.sf-menu").superfish({pathClass: 'corrente'});    

jQuery('#sf-menu li a').click(function() { 
     jQuery("#sf-menu li").removeClass('corrente'); 
     jQuery(this).parents().filter("li").addClass('corrente'); 
     jQuery("ul.sf-menu").superfish({pathClass: 'corrente' }); 
}); 
}); 
</script> 

HTML

<ul id="sf-menu" class="sf-menu sf-navbar"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Band</a></li> 
    <li><a href="#">Solo Projects</a> 
     <ul> 
     <li><a href="#">Tim</a></li> 
     <li><a href="#">Tom</a></li> 
     <li><a href="#">John</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Media Appearances</a></li> 
    <li><a href="#">Tour</a> 
     <ul> 
    <li><a href="#">The Reunion Tour</a> 
     <ul> 
     <li><a href="#">North American Leg</a></li> 
    </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href="#">Gallery</a></li> 
</ul> 

Le HTML ci-dessus fonctionne très bien, la classe "Corrente" est correctement réglée, mais quand je change html insérant des liens réels, la classe est bien définie mais se perdent lorsque la page de destination est chargée.

Pouvez-vous s'il vous plaît me donner des conseils sur comment stocker la classe ajoutée et le passer à travers la page de destination?

Nous vous remercions à l'avance

Answer 1

L'intégralité de l'environnement Javascript est réinitialisé lorsque vous accédez à une nouvelle page. Vous ne pouvez donc pas conserver les modifications effectuées en javascript entre les pages.

moyens possibles pour faire face à cela:

1. ouvrir la nouvelle page dans un iframe ou dans une fenêtre séparée. La page externe (pour un iframe) ou la page originale (pour une fenêtre séparée) ne recharge pas , donc les changements javascript ne seront pas perdus.
2. Ajouter une sorte de queryString à l'URL lorsque vous passez à la nouvelle page, puis interpréter cette querystring dans la nouvelle page (dans les javascript) pour faire tout changement que vous avez fait à nouveau.
3. Mettez les données dans un cookie qui vous permettra d'appliquer la modification sur la nouvelle page.

Answer 2

vous pourriez

• magasin la classe ajouté dans un cookie
• faire une requête AJAX au serveur de persister l'état sur le serveur (peut-être une source de données (comme une base de données)

Answer 3

Si ça aide encore, j'utilise un plugin jQuery appelé jquery.cookie.

Dans mon cas je travaillais avec WordPress et un plugin pour un quiz, après chaque étape la page s'est rechargée et je perds mes modifications. Donc, après avoir configuré le plugin jquery.cookie, j'ai pu conserver les modifications de jQuery, comme l'ajout de classes ou leur suppression.