Бортовой журнал Ктулху
    Вы здесь:
  • Главная
    • >
  • /dev
    • > Как поменять класс у div при помощи jQuery

Как поменять класс у div при помощи jQuery

В интернет-магазинах и прочих каталогах часто применяется вид списка товаров как блоков или строк с переключением вида. Я напишу как это сделать на jQuery.

Для начала надо стать программистом.

Для начала надо измерить радиус кривизны рук.

Разметка HTML

Список товаров

<ul id="ccc" class="box">
 <li>1111</li>
 <li>1111</li>
 <li>1111</li>
 <li>1111</li>
 <li>1111</li>
 <li>1111</li>
</ul>

Кнопки, которыми переключаем вид

<div class="content_sortPagiBar">
 <div class="row-fluid sortPagiBar"> 
 <div class="span4 hidden-phone">
 <div class="inner">
 <div class="btn-group" id="productsview">
 <a id="box" class="btn" href="#" rel="view-grid"><i class="icon-th"></i></a>
 <a id="line" class="btn" href="#" rel="view-list"><i class="icon-th-list"></i></a>
 </div>
 </div>
 </div>
<div class="span4 hidden-phone">
 <div class="inner">
</div>
 </div>
 <div class="span3">
 <div class="inner">
 </div>
 </div>
 <div class="span1">
 <div class="inner">
 </div>
 </div>
 </div>
</div>

Стили

ul.box,
 ul.list {
 display: block;
 width: 310px
 }
 ul.box li {
 display: block;
 width: 100px;
 height: 100px;
 border: 1px solid;
 float: left;
 }
 ul.list li {
 display: block;
 width: 100%;
 height: 100px;
 border: 1px solid;
 float: left;
 }

Также не забываем подключить Bootstrap и jQuery.

 Скрипт

Скрипт отлавливает клик по элементу #line и сначала удаляет класс #box, а затем добавляет класс #list.

С другой кнопкой то же самое, но наоборот.

<script type="text/javascript">
 jQuery(document).ready(function(){ 
 $("#line").click(function() {
 $('#ccc').removeClass('box');
 $('#ccc').addClass('list');
 });
 $("#box").click(function() {
 $('#ccc').removeClass('list');
 $('#ccc').addClass('box');
 });
 });
 </script>

Демо.