Javascript 在列表/网格视图切换器中将网格显示为默认值

我需要在我的网页中实现这个JSFIDLE代码。问题是我不知道如何使网格显示为默认值。在此演示中，列表显示为默认值。我需要将网格显示为默认值，然后在按“列表视图”时显示为列表

$（“按钮”）。单击（函数（e）{
if（$（this）.hasClass（'grid'））{
$（'#container ul'）.removeClass（'list'）.addClass（'grid'）；
}
else if（$（this）.hasClass（'list'））{
$（'#container ul'）.removeClass（'grid'）.addClass（'list'）；
}
});
#容器ul{列表样式：无；}
#容器.按钮{页边距底部：20px；}
#容器。列表li{宽度：100%；边框底部：1px点#CCC；边距底部：10px；填充底部：10px；}
#容器.网格li{浮动：左侧；宽度：20%；高度：50px；边框右侧：1px虚线#CCC；边框底部：1px虚线#CCC；填充：20px；}

网格视图
列表视图

项目1
项目2
项目3
项目4
项目5
项目6
项目7

您可以通过以下方式完成：


在
document
ready事件中，只需将
grid
类设置为
$（“#container ul”）
元素，默认情况下，您在
HTML
中将其更改为
class=“grid”
将此处的类更改为grid。@vijayP Good one。但我认为你的解决方案不是实现这一目标的正确途径。为什么我们需要写一个额外的脚本来实现这一点。相反，只需将默认类名从list改为grid即可。@SanthoshKumar-完全同意您的意见。我在HTML和CSS方面效率不高…
：）
！
   http://jsfiddle.net/akarun/LJf9p/

$(document).ready(function() {

  $('#container ul').addClass('grid');

  $('button').click(function(e) {
    if ($(this).hasClass('grid')) {
      $('#container ul').removeClass('list').addClass('grid');
    } else if ($(this).hasClass('list')) {
      $('#container ul').removeClass('grid').addClass('list');
    }
  });

})