刷新页面当前类

我正在尝试创建用户界面，但是当我刷新页面时，它将从导航链接中删除类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

刷新页面当前类

回答

相关问题