Переключатель блоков на JQuery

Самое логичное определение этого скрипта – это переключение блоков DIV на JQuery. Почему на JQuery? А потому, что информация меняется плавно. А сам скрипт, кстати, очень простой, минута ушла на его создание, больше работы здесь ушло на оформление. Переключатель блоков на JQuery работает легко: нажимаешь на ссылку и текущий контент плавно заменяется на другой. В отдельный элемент записывается имя открытого блока. Зачем это нужно? Ну, для того, чтобы при нажатии на другие ссылки скрывался именно текущий блок. Можно придумать и альтернативные варианты этому, но, по-моему, этот вариант самый простой.

Код без оформления

<script type="text/javascript"> function showhide(id02) {$('#'+document.getElementById('techdiv').innerHTML).fadeOut(100, function(){$('#'+id02).fadeIn(300)});document.getElementById('techdiv').innerHTML=id02} </script> <!---меню_переключателей--> <div id="techdiv" style="display:none">blok_nomer_1</div> <ul class="yraaa_menu"> <li><a href="javascript:;" onclick="showhide('blok_nomer_1')">Генератор загрузки</a></li> <li><a href="javascript:;" onclick="showhide('blok_nomer_2')">Иконки</a></li> <li><a href="javascript:;" onclick="showhide('blok_nomer_3')">Шаблон для Joomla</a></li> </ul> <!---меню_переключателей--> <!--переключающиеся_блоки--> <div id="blok_nomer_1"> <h1>Генератор загрузки</h1> Существует такой сервис, на котором можно создать загрузку для сайта, но без использования изображений. Есть такие сайты, которые совсем не используют изображения, лишь позволяют себе иногда использовать скриншоты. Генератор загрузки для сайта на CSS – это, разумеется, сайт на иностранном языке, но все-таки сразу понятно, что нужно делать. Генератор не создаст индикатора, который высчитывает процент загрузки, здесь создается анимация... <br><br><img src="/_pu/8/28360639.png" alt=""> </div> <div id="blok_nomer_2" style="display:none"> <h1>Иконки для разработчика</h1> Большой набор качественных иконок для разработчика содержится в одном архиве. Размер одной в архиве 32x32, а количество иконок – чуть меньше сотни. Данная графика отлично подойдет для сайта тематики веб-дизайна, графики и кодинга. К примеру, сайт о языке PERL с примерами скриптов мог бы иметь такие красочные иконки в меню и формах. Эти иконки бесплатные и скачать их Вы можете по прямой ссылке, без регистрации... <br><br><img src="/_pu/8/55498873.png" alt=""> </div> <div id="blok_nomer_3" style="display:none"> <h1>Новостной шаблон для Joomla </h1> Новостные сайты сразу же представляются загруженными и заполненными огромным объемом информации. Пусть даже на сайте с десяток статей, создается ощущение, что их сотни. Такой эффект создается из-за множества блоков и рубрик. Для новостного портала характерны рубрики такого типа: политика, искусство, спорт. В общем, все сферы нашей жизни. Новостной шаблон для Joomla имеет информативный и объемистый вид. Можно сравнить этот шаблон, например, с оформлением сайта CNN. Сходства сразу видны... <br><br><img src="/_pu/8/s08527258.jpg" alt=""> </div> <!--/переключающиеся_блоки-->

Код для подключения JQuery:

<script type="text/javascript" src="/test/9/img/jquery-1.3.2.min.js"></script>

Такое же оформление Вы можете увидеть в материале Вертикальное меню для сайта.