Mantenha o estado de alternância em divs usando o cookie.js após a visualização de atualização da página jsFiddle
Eu tenho um código simples que me permite alternar entre dois divs que são envoltórios para duas sub-navegações (# sub-nav-wrap é o nav alternativo). Eles são fixados na parte inferior do navegador:
$(function(){
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
});
});
O que desejo fazer é manter o estado de cada div o mesmo escolhido pelo usuário após a atualização da página e, mesmo que os cliques em um novo subtítulo, o menu permaneça o mesmo, em vez de recorrer ao estado padrão.
O html é este:
<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->
<div id="sub-nav-wrapmin" class="snWrap divone">
<div id="sn-contentmin">
<div id="sn-likemin"></div>
<div id="sn-coffeesml"></div>
<div id="sn-sharemin"></div>
<div id="sn-commentsml"></div>
<div id="toggle-barmin">
<div id="sn-sidebrdrmin"></div>
<div class="sn-toggle button"></div>
</div>
<ul class="sn-comicsmin menu">
<li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="sn-archive" href="#archive.html">Archive</a></li>
<li><a class="sn-vote" href="#vote.html">Vote</a></li>
<li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
<div id="sub-nav-container">
<div id="sub-nav-content">
<div id="sn-bnrlft"></div>
<div id="sn-bnrrgt"></div>
<div class="sn-dividelft"></div>
<div class="sn-dividergt"></div>
<div id="sn-likebg"></div>
<div id="sn-coffeebtn">
</div>
<div id="sn-sharebtn"></div>
<div id="sn-commentbtn"></div>
<div id="toggle-bar">
<div id="sn-sidebrdr"></div>
<div class="toggle button"></div>
</div>
</div>
<div id="sub-nav-brdr">
<ul class="sub-nav-comics menu">
<li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="archive" href="#archive.html">Archive</a></li>
<li><a class="vote" href="#vote.html">Vote</a></li>
<li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
</div>
O CSS é este:
#sub-nav-wrap {
display: none;
}
Esta é minha primeira vez perguntando, e eu tenho estragado meus cérebros para fazer isso funcionar usando outros códigos similares deste site, mas nada está funcionando. Gostaria de receber ajuda ...
David
Eu construí umjsFiddle para mostrar como a navegação funciona sem um cookie.este é minha tentativa usando cookies. Espero que seja algo simples e eu só sinto falta de entender ...