我正在使用以下代码来生成多个项目的网格视图和列表视图。它很好用，但是，我不知道如何将其默认设置为列表视图而不是网格视图。如何在页面加载时在列表视图中显示项目？
我想我想将“ list-group-item”类加载到“ products”元素上，但是我很难弄清楚如何进行展示。任何建议，指导或方向都将非常好！感谢您的帮助或协助。谢谢！！ ：）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List Grid View</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before, .item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 11px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="well well-sm">
<strong>Category Title</strong>
<div class="btn-group">
<a href="#" id="list" class="btn btn-default btn-sm icon-button"><i class="fa-icon fas fa-th-list"></i>List</a> <a href="#" id="grid" class="btn btn-default btn-sm icon-button"><i class="fa-icon fas fa-th"></i>Grid</a>
</div>
</div>
<div id="products" class="row list-group">
<div class="item col-xs-1 col-lg-2">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/100x100/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading eventWho">
$eventname</h4>
<p class="group inner list-group-item-text">
<span>$locationname | $locationcity, $locationstate</span></p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$eventtime</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success btn-md btn-primary" href="../create-invitation/?eid=$eid">Invite</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-1 col-lg-2">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/100x100/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading eventWho">
$eventname</h4>
<p class="group inner list-group-item-text">
<span>$locationname | $locationcity, $locationstate</span></p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$eventtime</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success btn-md btn-primary" href="../create-invitation/?eid=$eid">Invite</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-1 col-lg-2">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/100x100/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading eventWho">
$eventname</h4>
<p class="group inner list-group-item-text">
<span>$locationname | $locationcity, $locationstate</span></p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$eventtime</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success btn-md btn-primary" href="../create-invitation/?eid=$eid">Invite</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-1 col-lg-2">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/100x100/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading eventWho">
$eventname</h4>
<p class="group inner list-group-item-text">
<span>$locationname | $locationcity, $locationstate</span></p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$eventtime</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success btn-md btn-primary" href="../create-invitation/?eid=$eid">Invite</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
$('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
});
</script>
</body>
</html>