Afficher le div caché de manière permanente sur tout le site après avoir cliqué une fois sur un lien href

Afficher le contenu caché de façon permanente du site Web après avoir cliqué une fois sur un lien href

Voici un exemple de fonctionnement: Le div (petit en-tête) est caché au début, mais lorsque vous cliquez une fois sur la page parent, par exemple (page 1), le (petit en-tête) est visible sur tout le site Web même si vous entrez un nouveau. page ou actualiser le site.

  

http://jsfiddle.net/ctL6T/179/

Je peux imaginer que cela soit fait par Jquery. Tout serait une grande aide. À votre santé!

Vous pouvez utiliser Window.localStorage pour stocker un indicateur si le menu a été affiché, puis utilisez un script comme celui-ci pour exécuter la fonction show une seule fois.

En réponse à votre commentaire ci-dessous, j’ai ajouté une logique pour que si ce script est inclus sur plusieurs pages, il fonctionnera indépendamment pour chaque page. Je le fais en utilisant Window.location pour stocker les informations séparément pour chaque page visitée.

( Démo )

 var hide = localStorage[location] ? false : true; var hidden = document.querySelector('.little-header'); if(hide) { hidden.style.display = 'none'; document.onclick = function() { localStorage[location] = true; hidden.style.display = ''; document.onclick = ''; console.log('click'); } } 

Comme @Barmar et @Tiny Giant l’ont dit, le stockage local fonctionne bien et est très facile à utiliser. Voici une version de jQuery.

 $(function () { var showLittleHeader = localStorage.getItem('show_little_header'); if (showLittleHeader) { $('.little-header').show(); } $('.big-header').on('click', 'a', function () { localStorage.setItem('show_little_header', 1); $('.little-header').show(); }); }); 

Fiddle: http://jsfiddle.net/wqpjfvy7/