nascondi Mostra div in modo permanente tutto il sito dopo aver cliccato su un link <a> href volta

Question

nascondi Mostra div permanentemente buttare via sito web dopo aver fatto clic su un link href volta

Un esempio di come questo dovrebbe funzionare: La (poco -header) div è nascosto all'inizio, ma quando si fa clic una volta sulla pagina padre, ad es. (pagina 1), la (piccola intestazione) diventa visibile in tutto il sito Web anche se si inserisce una nuova pagina o si aggiorna il sito.

<div class="big-header"> 
    <ul> 
    <li> 
     <a href="#">Page 1</a> 
    </li> 
    <li> 
     <a href="#">Page 2</a> 
    </li> 
    <li> 
     <a href="#">Page 3</a> 
    </li> 
    </ul> 
</div> 
<div class="little-header"> 
    <ul> 
    <li> 
     <a href="#">Sub Page 1.1</a> 
    </li> 
    <li> 
     <a href="#">Sub Page 1.2</a> 
    </li> 
    <li> 
     <a href="#">Sub Page 3.3</a> 
    </li> 
    </ul> 
</div> 

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

Posso immaginare questo essere fatto da jQuery. Qualsiasi cosa sarebbe di grande aiuto. Saluti!

Answer 1

È possibile utilizzare Window.localStorage per memorizzare un flag se il menu è stato visualizzato, quindi utilizzare uno script come questo per eseguire solo una volta la funzione di visualizzazione.

In risposta al tuo commento di seguito, ho aggiunto la logica in modo che se questo script è incluso su più pagine, funzionerà in modo indipendente per ogni pagina. Lo faccio utilizzando Window.location per memorizzare le informazioni separatamente per ogni pagina visitata.

(Demo)

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'); 
    } 
} 

Answer 2

Come hanno detto @Barmar e @Tiny Giant, localStorage funziona bene ed è molto facile da usare. Ecco una versione di 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/