Небольшой интересный скриптик открытия. Простойскрипт реализует возможность перебора блоков в одном поле.
чтобы лучше понять - можно посмотреть демо работы скрипта:
без оформления:
посмотреть демос оформлением:
посмотреть демоНикаких файлов на сервер загружать не надо - только код.
Пример:
Код: Выделить всё
<script type="text/JavaScript">
$(document).ready(function() {
//Действие по умолчанию
$(".tab_content").hide(); //Скрыть все содержимое
$("ul.tabs span:first").addClass("active").show(); //Активировать первую вкладку
$(".tab_content:first").show(); //Показать первые содержание вкладке
//По щелчку события
$("ul.tabs span").click(function() {
$("ul.tabs span").removeClass("active"); //Удалите все "active" класс
$(this).addClass("active"); //Добавить "active" класса выбранной вкладки
$(".tab_content").hide(); //Скрыть вкладку Все содержание
var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки + содержание
$(activeTab).fadeIn(); //Fade в активного содержимого
return false;
});
});
</script>
<div>
<div style="border:1px solid #b5b5b5;padding:1px">
<ul class="tabs">
<span><a class="" href="#tab1"><b>1</b></a></span>
<span><a class="" href="#tab2"><b>2</b></a></span>
<span><a class="" href="#tab3"><b>3</b></a></span>
<span><a class="" href="#tab4"><b>4</b></a></span>
<span><a class="" href="#tab5"><b>5</b></a></span>
</ul>
</div>
<div style="border:1px solid #b5b5b5;padding:5px;text-align:center">
<div id="tab1" class="tab_content">
первый контейнер
</div>
<div id="tab2" class="tab_content">
второй контейнер
</div>
<div id="tab3" class="tab_content">
третий контейнер
</div>
<div id="tab4" class="tab_content">
четвёртый контейнер
</div>
<div id="tab5" class="tab_content">
пятый контейнер
</div>
</div>
</div>где
Код: Выделить всё
<span><a class="" href="#tab1"><b>1</b></a></span>- ссылка на открытие первого блока
Код: Выделить всё
<div id="tab1" class="tab_content">
первый контейнер
</div>- сам первый блок с информацией...
Для работы скрипта у вас должна быть подключена библиотека .
Если у вас её нет - подключить можно примерно так:
В "шапке" сайта найти
Вставить перед найденным
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>Кому удобнее разбираться самостоятельно у себя на компе - можно скачать демо-версию скрипта (в папке оба варианта - с оформлением и без):
скачать из архива сайта
