Вот альтернативное решение. Это не требует каких-либо знаний CSS. Идея проста: у вас есть содержимое как в виде списка, так и в виде сетки в вашем HTML-файле. Первоначально один из них скрыт с помощью свойства style = "display: none;" . Когда пользователь нажимает на гиперссылки «listview» или «gridview», вы будете использовать javascript, чтобы скрыть одну и отобразить другую. Вот фрагмент кода в jquery:
<script>
$(document).ready(function(){
$("#gridlink").click(function() {
$("#divlist").hide();
$("#divgrid").show();
});
$("#listlink").click(function() {
$("#divlist").show();
$("#divgrid").hide();
});
})
</script>
<a id="gridlink" href="#">Grid view</a> |
<a id="listlink" href="#">List view</a>
<div id="divgrid">Grid content here</div>
<div id="divlist" style="display:none">List content here</div>
Этот подход не так дорог, как может показаться. Поскольку вы используете одни и те же изображения, они будут загружены только один раз. Остальная часть HTML для gridview и listview не сильно увеличивает размер файла. Так что у вас все будет хорошо, если количество предметов, которые вы пытаетесь отобразить, действительно велико.