Вопрос по jquery, javascript, html – Сохранить состояние переключения на div с помощью cookie.js после обновления страницы. JsFiddle

1

У меня есть простой код, который позволяет мне переключаться между двумя 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 чтобы показать, как работает навигация без куки. это моя попытка использования куки. Я надеюсь, что это что-то простое, и я просто не понял, понял ...

Привет, Дэвид, все, что я сделал, это изменил ссылки, чтобы они назывались - то есть, какой-то текст связан, а не отображает несвязанный URL (до того, как это был просто простой URL). У меня не было времени, чтобы попытаться найти ответ, но сейчас я посмотрю на вас. ClarkeyBoy
@ClarkeyBoy Спасибо за этот пример, но он не работает в jsFiddle, с которым вы связались. Вы знаете, как кодировать мой пример с cookie.js? Я был бы признателен за рабочий пример cookie.js с моим jsfiddlejsfiddle.net/replacement4/nKFt7/60 David Bircham

Ваш Ответ

2   ответа
1

Вам нужен файл 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, сейчас он не будет работать должным образом, если элементы будут отображаться изначально.

FIDDLE

Плагин cookie хорошо документирован. Вы устанавливаете cookie, давая ему имя и значение, т.е. два значения, а не одно:

$.cookie('the_cookie', 'the_value');
@adeneo: ОП изначально спрашивал о файлах cookie, в частности, локальное хранилище не может быть вариантом, если, как и моя компания, они все еще поддерживают IE 6. Мы стараемся использовать localalstorage там, где мы можем, но используем куки как запасной вариант, если localalstorage недоступен. Это просто делается путем создания другой функции, которая пытается установить локальное хранилище, а затем продолжает устанавливать cookie, если это не удается.
Спасибо за помощь. Мой запрос состоял в том, чтобы попытаться использовать cookie.js, я пытался его использовать, но мне не удалось, учебники не показывают мне, как использовать cookie специально для этого. Я был бы очень рад, если бы вы могли показать мне, как использовать cookie.js с моим примером ... David Bircham
1

Одна вещь, которую я заметил, заключалась в том, что jQuery.cookie не присутствовал в скрипке, но я предполагаю, что у вас это есть на реальном сайте в любом случае.Вот ты иди. Я уверен, что есть более эффективные методы, но это все еще будет работать.

Слава Богу за умных людей! Спасибо! David Bircham

Похожие вопросы