Скрипт Табы (Вкладки) для сайта ucoz на css / html

Приветствую Вас Гость | RSS

Меню

	Главная страница Каталог файлов Программы для Windows 10 Темы для Windows 10 Программы для PC Программы для мобильного Игровой Soft Игры для ПК Шаблоны для ucoz Помощь на Ucoz Скрипты для ucoz Уроки,Видео уроки,Статьи Каталог статей Интернет Проблемы с ПО Безопасные обмен в интернете Проблемы и как их решить? Настройка роутера RT-G32 100 советов по жизни Немного о... Мои статьи Читы для игр Читы на Варфейс Читы на Копатель Читы на Minecraft Читы на Контра Сити Читы на Вормикс Читы на Бой с тенью Читы на CS Go Читы на Короли улиц Читы на Кубезумие 2 Читы на Блокада Фильмы on-line Боевики Фэнтези Детективы Драмы Комедии Мелодрамы Мультфильмы Приключения Сериалы Триллеры Ужасы Гостевая книга Добавить запись On-line Игры Флеш игры онлайн Флеш игра Орел Решка Стриптиз-Облом Связь с администратором Блог Видео Расширенный поиск

Главная » Файлы » Все для Ucoz » Скрипты для ucoz

Доброй ночи уважаемые веб мастера, сегодня мы научимся создавать вкладки (вкладки) для сайта ucoz.
В них мы можем поместить как текст,так и к примеру комментарии или же другие гаджеты.
Установка невероятно проста и заключается в том, что нужно установить данный код в место где мы хотим видеть наши Вкладки (табы).

Вставляем код в нужный вам раздел "Страница материала и комментариев к нему":

Код

<div class="menu1">
<br id="tab2"/><br id="tab3"/><br id="tab4"/><br id="tab5"/><br id="tab6"/>
<a href="#tab1"><b>Вкладка 1</b></a><a href="#tab2"><b>Вкладка 2</b></a><a href="#tab3"><b>Вкладка 3</b></a><a href="#tab4"><b>Вкладка 4</b></a><a href="#tab5"><b>Вкладка 5</b></a><a href="#tab6"><b>Вкладка 6</b></a>

<div>Содержимое вкладки 1</div>
<div>Содержимое вкладки 2</div>
<div>Содержимое вкладки 3</div>
<div>Содержимое вкладки 4</div>
<div>Содержимое вкладки 5</div>
<div>Содержимое вкладки 6</div>
</div>
<style type="text/css">
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6 {display:none; position:fixed;}

.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1),
.menu1 #tab4:target ~ a:nth-of-type(1),
.menu1 #tab5:target ~ a:nth-of-type(1),
.menu1 #tab6:target ~ a:nth-of-type(1) {
  background: #fff;
  padding: 8px 15px 8px 15px;
  border: 1px solid #CAD3DA;
  line-height: 32px; text-shadow:#CAD3DA 1px 1px 2px; color:#DC9248;}

.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3),
.menu1 #tab4:target ~ a:nth-of-type(4),
.menu1 #tab5:target ~ a:nth-of-type(5),
.menu1 #tab6:target ~ a:nth-of-type(6) {border-bottom: #F4F6F7; background: #DC9248; text-shadow:#CAD3DA 1px 1px 3px; color:#F7F7F7;}

.menu1 > a:hover { text-decoration:; }

.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1),
.menu1 #tab4:target ~ div:nth-of-type(1),
.menu1 #tab5:target ~ div:nth-of-type(1),
.menu1 #tab6:target ~ div:nth-of-type(1) {
  display: none;
  padding: 5px;
  border: 0px solid #CAD3DA;
  border-top: #fff;
  background: none;}

.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3),
.menu1 #tab4:target ~ div:nth-of-type(4),
.menu1 #tab5:target ~ div:nth-of-type(5),
.menu1 #tab6:target ~ div:nth-of-type(6) { display: block; }
</style>

Если Вкладки(табы) Вы хотите использовать для двух-трех видов комментариев, допустим (Ucoz,Вконтакте и Facebook),то вот готовый вариант:(для Вконтакте и Facebook) нужна регистрация для получения собственного кода.(Ознакомится Вконтакте и Facebook )

Вставляем в "Страница материала и комментариев к нему" предварительно удалив старый код комментариев:

Код

<div class="menu1">
<br id="tab2"/>
<a href="#tab1"><b>Ucoz</b></a><a href="#tab2"><b>Вконтакте</b></a>

<div>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25">Всего комментариев: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
  </div>
<div id="second"><div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "720", attach: "*"});
</script></div>
</div>
  <style type="text/css">
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6 {display:none; position:fixed;}

.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1),
.menu1 #tab4:target ~ a:nth-of-type(1),
.menu1 #tab5:target ~ a:nth-of-type(1),
.menu1 #tab6:target ~ a:nth-of-type(1) {
  background: #fff;
  padding: 8px 15px 8px 15px;
  border: 1px solid #CAD3DA;
  line-height: 32px; text-shadow:#CAD3DA 1px 1px 2px; color:#098ed3;}
.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3),
.menu1 #tab4:target ~ a:nth-of-type(4),
.menu1 #tab5:target ~ a:nth-of-type(5),
.menu1 #tab6:target ~ a:nth-of-type(6) {border-bottom: #F4F6F7; background: #098ed3; text-shadow:#CAD3DA 1px 1px 3px; color:#F7F7F7;}
.menu1 > a:hover { text-decoration:; }

.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1),
.menu1 #tab4:target ~ div:nth-of-type(1),
.menu1 #tab5:target ~ div:nth-of-type(1),
.menu1 #tab6:target ~ div:nth-of-type(1) {
  display: none;
  padding: 5px;
  border: 0px solid #CAD3DA;
  border-top: #fff;
  background: none;}

.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3),
.menu1 #tab4:target ~ div:nth-of-type(4),
.menu1 #tab5:target ~ div:nth-of-type(5),
.menu1 #tab6:target ~ div:nth-of-type(6) { display: block; }
</style>

На этом всё,установка закончена,можете побаловаться с цветами в css.
Удачи!

Пример второго варианта Вы можете увидеть внизу,под статьей.

/ --------------- \
/ Как нужно качать? \