Скрипты для ucoz, шаблоны для ucoz на ForuCoz.Com
ForuCoz.Сom - Портал где есть все для ucoz, у нас всегда, самые интересные скрипты для ucoz и шаблоны для ucoz, также можно скачать все для ucoz, огромный выбор иконок и графики для Photoshop дабы украсить свой сайт.
ForuCoz.com - У нас всегда лучшие Скрипты для ucoz, красивые шаблоны для ucoz, а на форуме всегда обсужненияе интересных тем.
ForuCoz.com - У нас всегда лучшие Скрипты для ucoz, красивые шаблоны для ucoz, а на форуме всегда обсужненияе интересных тем.
изготовление ключей
-
Контакты, реквизиты. Каталог коллекций.
revado.ru
-
Календари профессиональных школ и семинаров. Форма заказа проектов.
renderwork.ru
Вы просматриваете материал который относится к категории Скрипты для ucoz. Думаю вам понравился материал Вкладки с использованием jQuery и вы воспользуетесь им! :)
В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи jQuery.
Сначала подключаем библиотеку jQuery и файл стилей в разделе head HTML-документа:
Code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabs.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="tabs.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Добавляем сами вкладки на страницу:
Code
<div class="tabs">
<!–- tabs -–>
<ul class="tabNavigation">
<li><a href="#first">Первая</a></li>
<li><a href="#second">Вторая</a></li>
<li><a href="#third">Третья</a></li>
</ul>
<!–- tab containers -–>
<div id="first">
<p>Содержание первой вкладки</p>
</div>
<div id="second">
<p>Содержание второй вкладки</p>
</div>
<div id="third">
<p>Содержание третьей вкладки</p>
</div>
</div>
<!–- tabs -–>
<ul class="tabNavigation">
<li><a href="#first">Первая</a></li>
<li><a href="#second">Вторая</a></li>
<li><a href="#third">Третья</a></li>
</ul>
<!–- tab containers -–>
<div id="first">
<p>Содержание первой вкладки</p>
</div>
<div id="second">
<p>Содержание второй вкладки</p>
</div>
<div id="third">
<p>Содержание третьей вкладки</p>
</div>
</div>
А теперь небольшой скрипт (файл tabs.js), который позволит нам переключать вкладки.
Code
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Не указан
| Всего комментариев: 1 | |
 скрин
Невозможно найти ресурс Возможно, он был удален, переименован, или временно недоступен. | |
