Эффекты на основе Java Script

Ручное переключение панелей с вложенными панелями

Tab 1 Panel 1 В любой панеле можно размещать текстовые или другие блоки, включающие в себя любые другие элементы: таблици, формы, рисунки, Flash элементы и т.д. Например: картинка Tab 2 Panel 2 В панель можно вставлять другие панели Tab 1 Panel 1 Например: Flash элемент Tab 2 Panel 2 Panel 2 Tab 3 Panel 3 Tab 3 Panel 3	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<style type="text/css"> /* общий стиль переключателя / .concertina {background-color: #fff; border: 1px solid #ff0000; /border-top-width: 3px; border-bottom-width: 3px;/ margin: 0 auto 1em; max-width: 40em; POSITION: absolute; z-index: 10;} / стиль шапки закрытой панели / .concertina .trig {background: #888; border-top: 1px solid #000; /border-bottom: 1px solid #ccc;/ cursor: pointer; display: inline-block; margin: 0; padding: 2px 5px; position: relative; color: #000; font-weight: bold;} .concertina .trig {display: block;} / стиль шапки открытой панели / .concertina .open {background: #333; cursor: pointer; color: #fff;} / стиль шапки панели при наведении курсора / .concertina .trig:hover {/background: #aa8888;/ color: red;} / стиль панелей */ .concertina .targ {border-top: 0 !important; border-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; background: #555; display: inline-block; height: 100px; margin: 0; overflow: auto; padding: 0 10px;} .concertina .targ {display: block;} </style> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/prototype_bloki/1012/prototype.js"></script> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/prototype_bloki/1012/concertina.js"></script> <script type="text/javascript"> var domInit = function () { var con1 = new Concertina('concertina1', // Корневой ID элемента или объекта true, // Создавать вложения. false - нет 250, // Высота true, // анимация используется false - нет true // простая анимация false - замедленная анимация ); };Event.observe(document, 'dom:loaded', domInit); </script>
	Всё подписано, проблем быть не должно.
	Внутри тега <BODY> - </BODY> там где у Вас будет переключатель.
	<div style="width: 500px; height: 345px; POSITION: relative;"> <dl id="concertina1"> <dt>Tab 1</dt> <dd> <p>Panel 1</p> <p>Panel 1</p> <p>Panel 1</p> <p>Panel 1</p> <p>Panel 1</p> </dd> <dt>Tab 2</dt> <dd>Panel 2 <dl> <dt>Tab 1</dt> <dd>Panel 1</dd> <dt>Tab 2</dt> <dd> <p>Panel 2</p> <p>Panel 2</p> </dd> <dt>Tab 3</dt> <dd>Panel 3</dd> </dl> </dd> <dt>Tab 3</dt> <dd>Panel 3</dd> </dl> </div>
Здесь всё должно быть понятно. Колличество панелей и колличество вкладок в каждой из них, на Ваше усмотрение. Чтобы открыть или закрыть панель кликните по её названию.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.