Создание простейших табов без jquery UI

Создание простейших табов без jquery UI + акция в конце поста

Привет! Сегодня мы с Вами создадим самые простые табы какие только могут быть! Для этого нам понадобится только сама библиотека jquery. Конечно, желательно чтобы она была самая последняя. Это в Ваших же интересах! Итак приступим.

Для начала нам нужна структура html, которая будет включать в себя навигацию по табам и, собственно, сами табы! Она будет выглядеть так:

<ul class="nav">

<li>Главная</li>

<li>Новости</li>

<li>Контакты</li>

</ul>

<ul class="tabs">

<li class="activeTab">Первый таб</li>

<li>второй таб</li>

<li>Третий таб</li>

</ul>

С помощью класса activeTab мы и будем производить все действия. CSS для нашего меню будет следующее:

*{padding:0px; margin:0px;} /* обнуляем ненавистные падинги и маржины */

.nav{ overflow:hidden; display:block; width:500px; margin:0 auto; list-style-type:none;

}

.nav li{ float:left; cursor:pointer;

}

.tabs{ width:500px; margin:0 auto; display:block; clear:both; list-style-type:none;

}

.tabs li{ display:none;

}

.tabs li. activeTab{ display:block; /* делаем видимым нужный нам таб */

}

Ну и теперь перейдем к javascript. Это грубо казано, потому что наш скрипт будет полностью на JQEURY. Итак вот он:

1$(document).ready(function(){

$('.nav li').each(function(i){ // ищем все li в списке и узнаем их индексы var index = i;

$(this).click(function(){ // кликаем на li

$('.tabs li:eq('+index+')') // находим нужный нам таб, по индексу li по которой мы кликнули в меню

.addClass('activeTab') // присваиваем класс, который сделает видимым наш таб

.siblings() // находим все соседние табы (элементы li)

.removeClass('activeTab'); // удаляем класс, который делает таб активным, со всех остальных li

});

});

});


Карта сайта


Информационный сайт Webavtocat.ru