Приветствую Вас Прохожий | RSS Понедельник, 05.12.2016, 21:42
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 22
Гостей: 21
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

Табы в блоке с помощью html и css

Табы в блоке с помощью html и css Табы, в, блоке, с, помощью, html, и, css
Для реализации использовал псевдокласс :target.
Есть одно достоинство/недостаток при переключении якорем перемещаемся к шапке переключателя. Это спорный момент и кому-то может оказаться крайне полезной такая "фича".
Код

<div id="block1">
<div id="tab1"><a href="#tab1">вконтакте</a></div>
<div id="tab2"><a href="#tab2">twitter</a></div>
<div id="tab3"><a href="#tab3">facebook</a></div>
<div id="block1content">
<div id="block1content_default">Содержимое по умолчанию</div>
<div id="block1content_tab1">Содержимое 1 вкладки</div>
<div id="block1content_tab2">Содержимое 2 вкладки</div>
<div id="block1content_tab3">Содержимое 3 вкладки</div>
</div>
</div>


Код
/* Табуляция в блоке */
#block1 {background: #E8E8E8;}
#tab1 a,#tab2 a,#tab3 a {font: normal small-caps bold 18px arial,sans-serif;color: #fff;text-align:center;text-decoration: none;padding: 0 20px 0 25px;}
#tab1 {float:left;background: #5B7FA6;width:33%;}
#tab2 {float:left;background: #00B0F3;width:34%;}
#tab3 {float:left;background: #35619F;width:33%;}
#block1content {clear:left;padding: 10px 10px 15px 15px;}
#tab1:target,#tab2:target,#tab3:target {background: #E8E8E8;}
#tab1:target>a,#tab2:target>a,#tab3:target>a {color:#E54607;}
#block1content_tab1,#block1content_tab2,#block1content_tab3 {display:none;}
#block1content_default {display:block;}
#tab1:target~#block1content>#block1content_default,#tab2:target~#block1content>#block1content_default,#tab3:target~#block1content>#block1content_default {display:none;}
#tab1:target~#block1content>#block1content_tab1,#tab2:target~#block1content>#block1content_tab2,#tab3:target~#block1content>#block1content_tab3 {display:block;}

/* Конец табуляции в блоке */

На указанном сайте вы можете просмотреть код в деле. Если читающие пожелают позже могу выложить коды слайдера и воспроизведения видео из вида материалов в попап окне.
Автор\Источник: http://test-site-one.ru/

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 5210 | Комментарии: 1 | Рейтинг: 3.0/2 | |Категория: Скрипты блоки и шапки | Добавил: Кирилл | Дата: 24.10.2013 | Скачали: 0 | Теги: css, табы, html, блоке, помощью
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 1
1 XaXaTyH   Дата: 08.12.2013  Время: 13:26   [№ 15111]
А можно больше 3 зделать? допустим 4/5.


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru