刷新頁面當前類

我正在嘗試創建用戶界面，但是當我刷新頁面時，它將從導航鏈接中刪除類current。刷新頁面當前類

我下面這個教程http://www.ssdtutorials.com/tutorials/series/list-grid-view-jquery-cookies.html

下面是我的代碼：

$(function() { 
    var cc = $.cookie('list_grid'); 
    if (cc == 'g') { 
     $('#products').addClass('grid'); 
    } else { 
     $('#products').removeClass('grid'); 
    } 
}); 

$(document).ready(function() { 

    $('#grid').click(function() { 
     $(".current").removeClass("current"); 
     $(this).addClass("current"); 

     $('#products').fadeOut(500, function() { 
      $(this).addClass('grid').fadeIn(500); 
      $.cookie('list_grid', 'g'); 
     }); 
     return false; 
    }); 

    $('#list').click(function() { 
     $(".current").removeClass("current"); 
     $(this).addClass("current"); 

     $('#products').fadeOut(500, function() { 
      $(this).removeClass('grid').fadeIn(500); 
      $.cookie('list_grid', null); 
     }); 
     return false; 
    }); 

});

如果有人需要這樣的HTML代碼

<div id="wrapper"> 

     <div id="navigation"> 
      <a href="#" id="list">List view</a> 
      <a href="#" id="grid">Grid view</a> 
     </div> 

     <div id="products"> 

      <?php for($i = 1; $i <= 4; $i++) { ?> 

       <div class="product"> 

        <div class="wrapper"> 

         <div class="image"> 
          <img src="images/0<?php echo $i; ?>.jpg" alt="image <?php echo $i; ?>" width="160" height="160" /> 
         </div> 

         <div class="description"> 

          <h1><a href="#">Article title</a></h1> 

          <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p> 

         </div><!-- end description --> 

        </div><!-- end wrapper --> 

       </div><!-- end product --> 

      <?php } ?> 

     </div><!-- end products --> 

    </div><!-- end wrapper -->

來源

2012-01-29 Code Lover

看起來像你的代碼只添加'grid'類，取決於cookie而不是'current'？ – 2012-01-29 19:30:42

您的初始html標記是否包含開頭的類？ – Kristian 2012-01-29 19:30:46

當您刷新頁面，它會以其原始狀態重新加載。它不記得哪個項目有current類。你需要使用類似於你已經使用的cookie的東西，如果你想讓頁面能夠記住哪個元素動態添加了哪個類。

事情是這樣的：

$(function() { 
    var cc = $.cookie('list_grid'); 
    if (cc == 'g') { 
     $('#products').addClass('grid'); 
     $('#grid').addClass('current');    
    } else { 
     $('#products').removeClass('grid'); 
     $('#list').addClass('current'); 
    } 
});

BTW，$(function() { ... }是寫$(document).ready(function() { ... }的速記方法，所以你其實可以結合上面的兩種功能。

來源

2012-01-29 19:34:01 FishBasketGordo

我不熟悉js和一個教程，你能幫我提供代碼嗎？ – 2012-01-30 02:17:04

沒問題。我添加了一個我正在談論我的答案的例子。 – FishBasketGordo 2012-01-30 06:26:46

這對我來說很好。非常感謝:) – 2012-01-30 14:27:23

如果你想顯示你的對象在上次查看，保存你的對象類也在你的cookie點擊，在刷新你的數據將返回到第一條語句。

來源

2012-01-29 19:37:21

刷新頁面當前類

回答

相關問題