Вопрос по jquery, javascript, html – Сохранить состояние переключения на div с помощью cookie.js после обновления страницы. JsFiddle
У меня есть простой код, который позволяет мне переключаться между двумя div-ами, которые являются переносами для двух суб-переходов (# sub-nav-wrap - альтернативная навигация). Они прикреплены к нижней части браузера:
$(function(){
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
});
});
Что я хочу сделать, так это сохранить состояние каждого элемента Div таким же, как оно было выбрано пользователем после обновления страницы, и даже если щелчки на новом подзаголовке меню останутся прежними, вместо того, чтобы прибегать к состоянию по умолчанию.
HTML это:
<!--- 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>
CSS это:
#sub-nav-wrap {
display: none;
}
Это мой первый запрос, и я ломал голову над тем, чтобы заставить его работать, используя другие подобные коды с этого сайта, но ничего не работает. Буду признателен за любую помощь ...
Дэвид
Я построилjsFiddle чтобы показать, как работает навигация без куки. это моя попытка использования куки. Я надеюсь, что это что-то простое, и я просто не понял, понял ...
Вам нужен файл cookie JQueryплагин использовать куки таким образом в JQuery. В jQuery отсутствует встроенная поддержка того, что вы пытаетесь сделать.
Если старые браузеры не являются проблемой, вы можете использовать локальное хранилище и сделать что-то вроде:
$(function(){
var wrapmin = localStorage.getItem('wrapmin')||false,
wrap = localStorage.getItem('wrap')||false;
if (wrapmin) $('#sub-nav-wrapmin').show();
if (wrap) $('#sub-nav-wrap').show();
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
wrapmin = $('#sub-nav-wrapmin').is(':visible');
wrap = $('#sub-nav-wrap').is(':visible');
localStorage.setItem('wrapmin', wrapmin),
localStorage.setItem('wrap', wrap);
});
});
Вам также нужно изменить свой CSS, сейчас он не будет работать должным образом, если элементы будут отображаться изначально.
Плагин cookie хорошо документирован. Вы устанавливаете cookie, давая ему имя и значение, т.е. два значения, а не одно:
$.cookie('the_cookie', 'the_value');
Одна вещь, которую я заметил, заключалась в том, что jQuery.cookie не присутствовал в скрипке, но я предполагаю, что у вас это есть на реальном сайте в любом случае.Вот ты иди. Я уверен, что есть более эффективные методы, но это все еще будет работать.
Похожие вопросы
