Question

有一个按钮表和列表。点击表项目会显示在表格中。如果单击列表 - 项目将显示在列表中使用Cookie记住Сondition（列表或表）

但当Cookie为空时，默认的有效按钮列表，产品会显示在表格中。

我需要显示产品表格，默认情况下，设置有效按钮表格。

我不明白按钮列表的值active在哪里

默认情况下，使用 js 制作按钮值表格 active，仅适用于首次按下。

ERB ：

<ul class="ctf--b-view-nav">
  <li class="<%= 'active' if cookies['filter-product-views'] != 'buble' %>">
    <a class="ctf--b-view-nav-list" href="">item</a>
  </li>
  <li class="<%= 'active' if cookies['filter-product-views'] == 'buble' %>">
    <a class="ctf--b-view-nav-cols" href="">table</a>
  </li>
</ul>

<!-- container with items -->
<div class="infinite-table">
  <ul class="ctf--b-product-list <%= 'ctf--b-product-list-buble' unless cookies['filter-product-views'] == 'buble' %>">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

JS ：

$(document).ready(function(event){
    $('.ctf--b-view-nav a').click(function() {
    if (!($(this).parent().hasClass('active')))
    {
        $('.ctf--b-view-nav li').removeClass('active');
        $(this).parent().addClass('active');
        if ($(this).hasClass('ctf--b-view-nav-cols'))
        {
          $.cookie('filter-product-views', 'buble');
          $('.ctf--b-product-list').addClass('ctf--b-product-list-buble');
        }
        else{
          $('.ctf--b-product-list').removeClass('ctf--b-product-list-buble');
          $.cookie('filter-product-views', 'non-buble');
        }
        return false;

    }
    else {
        return false;
    }
  });
});

css :(对于按钮使用精灵）

.ctf--b-view-nav { list-style:none; vertical-align:top; right:0; top:-50px; position:absolute; }
.ctf--b-view-nav li { float: left; padding:0 0 0 10px; }
.ctf--b-view-nav a { width:18px; height:18px; font-size:2em; line-height:0; display:block; }
.ctf--b-view-nav .active .ctf--b-view-nav-list { background-position:0 bottom; }
.ctf--b-view-nav .ctf--b-view-nav-cols { background-position:right 0; }
.ctf--b-view-nav .active .ctf--b-view-nav-cols { background-position:right bottom; }

如何制作默认值？

0 个答案: