使用淡入和淡出更改视图模式（并设置 cookie）

Question

我需要让用户在List-view、Grid-view 和Full-view 之间选择查看模式。基本结构很简单，大概是这样：

<ul>
    <li><a href="#">List Toggle</a></li> 
    <li><a href="#">Grid Toggle</a></li> 
    <li><a href="#">Full Toggle</a></li> 
</ul>

<div id="wrap">
<div id="list-view">
    <div class="line">lorem line</div>
    <div class="line">lorem line</div>
    <div class="line">lorem line</div>
</div>

<div id="grid-view">
    <div class="box">lorem box</div>
    <div class="box">lorem box</div>
    <div class="box">lorem box</div>
</div>

<div id="full-view">
    <div class="full">full lorem</div>
    <div class="full">full lorem</div>
    <div class="full">full lorem</div>
</div>
</div>

这是一个jsfiddle，我从list-view 开始设置为可见，其他设置为隐藏：

http://jsfiddle.net/eTb5C/13/

这是我正在考虑实施的一个，但需要它用于 3 个选项.. http://jsfiddle.net/mgNQy/2/

基本上，如果你点击一个视图模式，当前的视图模式会淡出，而选择的视图模式会淡入。

如果可能的话，我还想添加一个 cookie 来记住用户的偏好，但我不知道该怎么做。我对 jQuery 很陌生，希望我的问题不是太基本。

Answer 1

其实没有什么特别的，你只有三个标签（列表、网格、完整）。 首先，我建议您遵循以下标记：

   <ul class="tabs js-view-mode">
      <li><a href="#list">List</a></li>
      <li><a href="#grid">Grid</a></li>
      <li><a href="#full">Full</a></li>
    </ul>

    <section id="viewMode">
      <div id="list">here is list mode content</div>
      <div id="grid">here is grid mode content</div>
      <div id="full">here is full mode content</div>
    </section>

如您所见，在选项卡上，<a href=""> 类中，我将 id 用于我们想要显示的内容。这是安全和容易的，因为脚本不会混淆他必须展示的内容。

同样在 html 中，您必须加载 jquery 库和 jquery-cookie（您可以避免按照 javascript-cookies 的文档加载此插件）。最好在</body> 标签之前加载它们，以获得更快的页面加载时间。

您想要的 jQuery 代码如下所示：

$(document).ready(function(){
  var wrap = $('#viewMode'),
      viewMode = $.cookie( 'view-mode' );
  wrap.children().hide();

  $('.js-view-mode').on( 'click', 'a',function( e ){
    e.preventDefault();
    var t = $(this),
        type = t.attr('href');

    $(type).fadeIn()
      .siblings().fadeOut();

    viewMode = $.cookie( 'view-mode', type );

  });

  if ( viewMode ) {
    $('.js-view-mode a[href='+ viewMode +']').trigger('click');
  } else {
    $('.js-view-mode li:first a').trigger( 'click' );
  }

});

你可以看到现场测试here

编辑：JS Fiddle v2（添加活动类+延迟淡入/淡出+点击活动项返回）