liTabs - jQuery Tabs или вкладки на jQuery
jQuery плагин liTabs создает вкладки-табы с различными эффектами переключения.
Структура кода liTabs такова, что вам не потребуется прописывать оригинальные идентификаторы для содержимого вкладок-табов.
Пример работы на JSFIDDLE
Плагин liTabs содержит 4 эффекта переключения:
clasic - без эффектов,
fade - плавное затухание содержания,
hSlide - горизонтальный слайд содержания,
vSlide - вертикальный слайд содержания
Все табы одной общей группы должны находиться внутри элемента "ul" с классом "t_wrap" и любым произвольным классом для инициализации, например "liTabs":
<ul class="liTabs t_wrap"></ul>
Каждый отдельный таб записываем элементом "li" с классом "t_item":
<ul class="liTabs t_wrap">
<li class="t_item"></li>
<li class="t_item"></li>
<li class="t_item"></li>
</ul>
Для каждого таба создаем еще по два элемента:
Первый - это сама так называемая вкладка (ссылка, таб), элемент с именем нашего таба.
Этим элементом будет тег "a" с классом "t_link":
<li class="t_item">
<a class="t_link" href="#">Название таба</a>
</li>
Второй - элемент с содержанием нашего таба (текст, картинки, ссылки, мультимедийный файлы)
Этим элементом будет тег "div" с классом "t_content":
<li class="t_item">
<a class="t_link" href="#">Название таба</a>
<div class="t_content">Содержание таба</div>
</li>
Код для группы из трех табов будет выглядеть вот так:
<ul class="liTabs t_wrap">
<li class="t_item">
<a class="t_link" href="#">Название таба 1</a>
<div class="t_content">Содержание таба 1</div>
</li>
<li class="t_item">
<a class="t_link" href="#">Название таба 2</a>
<div class="t_content">Содержание таба 2</div>
</li>
<li class="t_item">
<a class="t_link" href="#">Название таба 3</a>
<div class="t_content">Содержание таба 3</div>
</li>
</ul>
Подключаем CSS плагина "liTabs":
<link rel="stylesheet" href="#">
Осталось подключить библиотеку "jQuery" и плагин "liTabs":
<script src="/js/jquery-1.8.min.js"></script>
<script src="/js/jquery.liTabs.js"></script>
И проинициализировать наш плагин:
$(function(){
$('.liTabs').liTabs({
duration: 500, //A string or number determining how long the animation will run
effect:'vSlide' //clasic, fade, hSlide, vSlide
});
});
Чтобы после загрузки страницы показать содержание первого, либо любого другого таба, дописываем элементу "t_link" класс "cur":
<ul class="liTabs t_wrap">
<li class="t_item">
<a class="t_link cur" href="#">Название таба 1</a>
<div class="t_content">Содержание таба 1</div>
</li>
<li class="t_item">
<a class="t_link" href="#">Название таба 2</a>
<div class="t_content">Содержание таба 2</div>
</li>
<li class="t_item">
<a class="t_link" href="#">Название таба 3</a>
<div class="t_content">Содержание таба 3</div>
</li>
</ul>
BugFix
14.08.2013 Если класс .cur не стоит у ссылки, то по умолчанию открыта первая вкладка
24.04.2013 Добавлена поддержка вложенности табов
20.12.2012 Исправлен баг с определением размеров элементов в скрытых табах
19.12.2012 Исправлен баг css в IE7, вызывающий неправильное расположение табов.
Комментарии
1. У вас подключено одновременно две версии jQuery.
Версия 1.8.0 - её вы видимо поключили вместе с плагином табов
И версия 1.3.2 - её вы подключили наверное с каким-то другим плагином, или эта версия подключена по умолчанию в вашем шаблоне так как ссылка на ней укозовская http://s77.ucoz.net/src/jquery-1.3.2.js
Проблема именно в этой версии - она давно устарела и не поддерживает такие события как "on". Постарайтесь отключить её и оставить только одну подключенную версию jQuery (более новую).
Скачайте заново архив и замените файлы
liTabs.css и jquery.liTabs.j s
Вы могли бы просто задать элементу UL (родителю табов) стиль: overflow:hidden.
Вам ведь нужно было лишь изолировать элемент со свойством "clear:both" от левой колонки со свойством "float:left"
var autoChanger = setInterval(fun ction() {
var container = $('.liTabs1');
var tabs = container.find( '.t_link');
var currentTab = container.find( '.t_link.cur');
var nextTab = tabs.eq(current Tab.parent().in dex()+1);
if (nextTab.length == 0) {
nextTab = tabs.eq(0);
}
nextTab.click() ;
}, 1000);
:) Вариант!
RSS лента комментариев этой записи