在頁面刷新視圖後使用cookie.js保持div上的切換狀態jsFiddle

我有一個簡單的代碼，它允許我在兩個包含兩個子導航（＃sub-nav-wrap是替代導航）的div之間切換。它們固定在瀏覽器的底部：在頁面刷新視圖後使用cookie.js保持div上的切換狀態jsFiddle

$(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。 This是我嘗試使用cookie。我希望它是簡單的東西，我只是想知道...

來源

2012-07-28 David Bircham

@ClarkeyBoy感謝這個例子，但它似乎並沒有在你鏈接到的jsFiddle中工作。你知道如何用cookie.js編碼我的例子嗎？我會非常喜歡cookie.js的一個工作示例，用我的jsfiddle http://jsfiddle.net/replacement4/nKFt7/60/ – 2012-07-28 21:16:01

嗨大衛，我所做的只是更改鏈接，使它們被命名 - 即一些文本是鏈接而不是顯示未鏈接的網址（在它只是普通網址之前）。我沒有時間去嘗試找到答案，但我現在要看看你。 – ClarkeyBoy 2012-07-28 22:37:06

您需要jQuery cookie plugin才能在jQuery中使用cookie。 jQuery中沒有原生支持你正在嘗試做的事情。

如果舊的瀏覽器are'nt一個問題，你可以使用本地存儲和執行類似：

$(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');

來源

2012-07-28 18:58:20 adeneo

謝謝你的幫助。我的查詢是嘗試使用cookie.js，我試圖使用它，但我沒有成功的教程不告訴我如何使用cookie專門爲此。如果yu能夠告訴我如何使用cookie.js和我的例子，我會非常感激... – 2012-07-28 21:10:35

@adeneo：OP最初特別詢問cookie - 如果像我的公司那樣，他們支持IE 6，local storage可能不是一個選項仍然。如果本地存儲不可用，我們會嘗試使用localstorage，但可以使用cookie作爲後備。這只是通過創建另一個函數來完成的，該函數嘗試設置localstorage，然後繼續設置cookie，如果失敗。 – ClarkeyBoy 2012-07-28 23:03:03

有一件事我注意到的是，jQuery.cookie是不存在的小提琴，但我假設你有一個對任何情況下的實際網站。 Here你走了。我相信有更有效的方法，但這仍然有效。

來源

2012-07-28 22:59:52 ClarkeyBoy

感謝天賜聰明的人！謝謝！ – 2012-07-31 11:38:53

在頁面刷新視圖後使用cookie.js保持div上的切換狀態jsFiddle

回答

相關問題