使用jQuery'cookie'維護網站上的選定標籤

有人可以解釋我如何使用jQuery Cookie plugin將選定標籤保留在整個網站上嗎？使用jQuery'cookie'維護網站上的選定標籤

下面是的jsfiddle形式我當前的代碼：http://jsfiddle.net/mcgarriers/RXkyC/

如果TAB2點擊並鏈接到谷歌被點擊，我還是這樣的標籤保持開放，當我返回到該頁面。

有人可以向我解釋我是如何實現這一目標的嗎？

我在這裏附上我的代碼以供參考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Conforming XHTML 1.0 Strict Template</title> 

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> 

<script type="text/javascript"> 
$(function() { 
    var timeouts = [], 
     nTimeouts = 0; 
    // A helper function that allows multiple LI elements to be either 
    // faded in or out or slide toggled up and down 
    function fadeOutItems(ele, delay) { 
     var $$ = $(ele), $n = $$.next(); 
     // Toggle the active class 
     $$.toggleClass('active'); 
     // Clear any timeout's still waiting 
     while (nTimeouts--) { 
      clearTimeout(timeouts[nTimeouts]); 
     } 
     // Ensure the next element exists and has the correct nodeType 
     // of an unordered list aka "UL" 
     if ($n.length && $n[0].nodeName === 'UL') { 
      nTimeouts = $('li', $n).length; 
      $('li', $n).each(function(i) { 
       // Determine whether to use a fade effect or a very quick 
       // sliding effect 
       // cache this 
       var _this = $(this); 
       timeouts[i] = setTimeout(function() { 
        delay ? _this.fadeToggle('slow') : _this.slideToggle('fast'); 
       }, 400*i); 
      }); 
     } 
    } 
    // Retrieves the URL parameters from the window object and allows 
    // for custom query parameter requests by name 
    function getParameterByName(name) { 
     name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]'); 
     var regexS = '[\\?&]' + name + '=([^&#]*)'; 
     var regex = new RegExp(regexS); 
     var results = regex.exec(window.location.href); 
     if (results === null) { 
      return false; 
     } else { 
      return decodeURIComponent(results[1].replace(/\+/g, ' ')); 
     } 
    } 
    // This is the jQuery event that controls the click event for the 
    // tabs on the page by using a class to cut down on code 
    $('a', '.tabs').click(function(e) {  
     //e.preventDefault(); 
     $('.tabs ul li').hide(); 
     // Check on the other tabs, if the anchor link contains the 
     // class "active" fade out the UL list items 
     var $ca = $('a.active', '.tabs'); 
     if ($ca.length) { 
      // Check the currently selected tab against the one just clicked, 
      // if they are the same end the code right here! 
      if ($(this).parent().attr('id') === $ca.parent().attr('id')) { 
       return false; 
      } 
      fadeOutItems($ca, false); 
     } 
     fadeOutItems(this, true); 
    }); 
    // Check the URL query string, if a tab hash is present we can 
    // force the click event on the selected tab 
    // 
    // Eg. http://www.example.com/my-page.html#tab2 
    var query = getParameterByName('tab'); 
    if (query !== false) { 
     document.getElementById(query)[0].click(); 
    } 
}); 
</script> 

    <style type="text/css"> 
    body { 
    font-family: Arial; 
    font-size: 13px; 
    line-height: 16px; 
    } 

    .tabs a { 
     background-color: #dedede; 
     color: #565656; 
     display: block; 
     margin-bottom: 5px; 
     padding: 5px 8px; 
     text-decoration: none; 
    } 

    .tabs ul { 
     margin: 0 0 10px; 
     padding: 0; 
    } 

    .tabs li { 
     background-color: #eee; 
     border: 1px solid #ccc; 
     color: #1a1a1a; 
     display: none; 
     border-radius: 5px; 
     margin-bottom: 1px; 
     padding: 5px 10px; 
    } 
    </style> 

</head> 
<body> 

<div id="tabs"> 

    <div id="tab1" class="tabs"> 
    <a href="#" id="tab1link">Tab 1</a> 

     <ul> 
      <li>1</li> 
      <li>2</li> 
     </ul> 
    </div> 

    <div id="tab2" class="tabs"> 
     <a href="#" id="tab2link">Tab 2</a> 

     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li><a href="http://www.google.com/">4</a></li> 
     </ul> 
    </div> 

</div> 

</body> 
</html>

任何指針非常感謝。

來源

2011-10-23 michaelmcgurk

您首先需要設計一種機制，讓您以編程方式選擇選項卡。例如在jQuery UI選項卡實現中，這是通過select方法實現的。您還需要閱讀當前選定選項卡的方法。例如： -

var selected = $tabs.tabs('option', 'selected');

然後在unload頁面事件存儲在cookie中所選擇的選項卡的價值。在頁面加載事件中，從cookie中讀取值並選擇適當的選項卡。

來源

2011-10-23 12:50:51 kgiannakakis

謝謝你，kgiannakakis。不幸的是我的Javascript技能非常差。有沒有可能給我一些示例代碼來處理？我真的很感激。 – michaelmcgurk

使用jQuery'cookie'維護網站上的選定標籤

回答

相關問題