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

Красивое ручное переключение блоков информации и работа с ними

My Work About Me Contact Tab 1 Колличество блоков информации на Ваше усмотрение. В блоки можно включать практически всё: текст, картинки, кнопки, ссылки, таблици, формы, Flash и т.д. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tab 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tab 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<STYLE type=text/css> /* меню / .mootabs_title {list-style-image: none; list-style-type: none; margin: 0px; padding: 0px; height: 24px;} .mootabs_title li {float: left; background-color: #888; border: #000000 1px solid; color: #aa0000; FONT-WEIGHT: bold; padding: 2px 8px 2px 8px; margin-right: 2px; cursor: pointer; height: 24px;} .mootabs_title li.active {background-color: #666; border: #000000 1px solid; color: #ff6d2f; FONT-WEIGHT: bold} .mootabs_title li:hover {background-color: #666000;} / панель информации */ .mootabs_panel {display: none; background-color: #ddd; position: relative; width: 100%; top: -1px; clear: both; overflow: auto;} .mootabs_panel h1 {color:#ff6d2f; font-size: 24px; font-weight: bold; text-decoration: underline;} .mootabs_panel.active {background-color: #666; border: #000000 1px solid; color: #cccccc; padding: 5px; display: block;} </STYLE> <script src="http://skriptkpbstudio.ucoz.ru/demo_srt/mootools_bloki/943/js/mootools.v1.1.js" type="text/javascript" charset="utf-8"></script> <script src="http://skriptkpbstudio.ucoz.ru/demo_srt/mootools_bloki/943/js/mootabs1.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> window.addEvent('domready', init); function init() { myTabs1 = new mootabs('myTabs'); } </script>
	Всё подписано, проблем быть не должно. Всё параметры и стили блока нереключений задаются в CSS. jQuery скрипты Вам впринципе и не нужны.
	Внутри тега <BODY> - </BODY> там где у Вас будет блок переключения информации.
<div id="myTabs"> <ul class="mootabs_title"> <li title="My Work">My Work</li> <li title="About Me">About Me</li> <li title="Contact">Contact</li> </ul> <div id="My Work" class="mootabs_panel"> <h1>Tab 1</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="About Me" class="mootabs_panel"> <h1>Tab 2</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="Contact" class="mootabs_panel"> <h1>Tab 3</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div></div>
Здесь Вам всё должно быть понятно. Колличество блоков информации на Ваше усмотрение. В блоки можно включать практически всё: текст, картинки, кнопки, ссылки, таблици, формы и т.д..
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.