НАМ 10 ЛЕТ
беЛн.бу
- Белорусский, народный портал






Реклама

Купить ссылку здесь за руб.
Поставить к себе на сайт

Реклама



Вход на портал

Для просмотра профиля, войдите на портал как пользователь.

Меню портала

Погода

GISMETEO: Погода по г.Минск
Погода в других городах

Категории раздела

Скрипты для uCoz [32]Шаблоны для uCoz [2]
Видео уроки по ucoz [0]Иконки для ucoz [0]
Кнопки для ucoz [2]Php скрипты для ucoz [0]

Полезные ссылки

Статистика портала

соц.сети

Облако тегов

Мы принимаем



ТОП РЕЙТИНГ

Скрипты (CMS) и Программы (SOFT)

Скрипты (CMS) и Программы (SOFT) » Для UCOZ » Скрипты для uCoz

Миниатюрные вкладки на JavaScript для uCoz

чень часто на сайтах используют вкладки (Tabs), для сортировки информации, чтобы она не была вся в куче, а была поделена по категориям. Вот например взять школьный сайт. Ваша задача состоит в том чтобы написать общую информацию про каждый класс. Не обязательно для этого создавать новые страницы, вам достаточно создать одну и на ней разместить Javascript вкладки, по-другому «Табы».

В этом материале мы выложили для вас простые вкладки без зависимостей, на чистом JavaScript. Работают во всех современных браузерах (IE9+).

Установка

1. Для начала загрузим все необходимые файлы в Файловый менеджер.

2. Между <head> и </head> подключаем файл JavaScript который будет отвечать за работоспособность наших вкладок:

<script src="http://ваша ссылка/puretabs.js"></script>

3. Там где мы хотим видеть наши вкладки в нужное место вставляем следующий код:

<div class="tabs">

  <nav class="tabs__navigation">  
  <a class="tabs__link tabs__link--active" href="#first">первая секция</a>
  <a class="tabs__link" href="#second">вторая секция</a>
  <a class="tabs__link" href="#third">третья секция</a>
  <a class="tabs__link" href="#fourth">четвёртая секция</a>  
  </nav>
   
  <p class="tabs__section" id="first">Умножение двух векторов…</p>
  <p class="tabs__section" id="second">Нормаль к поверхности…</p>
  <p class="tabs__section" id="third">Математическое моделирование…</p>
  <p class="tabs__section" id="fourth">Подынтегральное выражение…</p>
   
</div>

<script> pureTabs.init('tabs__link', 'tabs__link--active'); </script>

 

Ссылки и секции связаны идентификатором секции, который прописывается в атрибут href у ссылки. Каждая ссылка должна иметь общий класс (по умолчанию — puretabs). Чтобы задать секцию по умолчанию, следует добавить к ссылке на эту секцию класс puretabs--active.

4. Таблица стилей (CSS):

.tabs {
border: 1px solid #ddd;
position: relative;
margin-top: 5rem;
margin-bottom: 3rem;
}

.tabs__section {
margin: 1rem;
}

.tabs__navigation {
margin-left: -1px;
position: absolute;
top: -34px;  
}  

.tabs__link {
display: inline-block;
border: 1px solid #ddd;  
text-decoration: none;  
padding: .25rem .75rem;  
color: #B3B3B3;  
background: #E7E7E7;  
margin-left: .25rem;
}

.tabs__link:first-child {
margin-left: 0;
}  

.tabs__link--active {
font-weight: bold;  
border-bottom-color: #fff;
background: #fff;
color: #186baa;
}

 

Чтобы задать ссылкам пользовательские классы, достаточно при инициализации скрипта передать их в качестве параметров:

Пользовательские классы для вкладок на JavaScript

  • var className = 'tab', // Общий класс ссылок
  • activeClassName = 'tab--active' // Класс активной ссылки
  • pureTabs.init(className, activeClassName);
Размер файла: 1 kb


Внимание!!! Скачивание файла доступно, только для групп "Пользователи", "VIP" и "Я, Online".
Категория: Скрипты для uCoz | Добавил: rinhed (01.10.2015)
Просмотров: 74 | Теги: скрипты для Ucoz, миниатюрные, JavaScript, вкладки, uCoz, для, на
Всего комментариев: 0
Имя *:
Email:
Код *:


Внимание!
В комментариях запрещено размещать ссылки, рекламу сторонних ресурсов(сайтов). Если Вы разместили ссылку или рекламу, то комментарий будет удален автоматически.

Реклама

Корзина

Ваша корзина пуста

Переводчик

Выберите язык портала

Поиск по порталу

Поиск от яндекс

Анекдоты...

[18.02.2017][Разные]

Иной муж - как Карлсон: полетает, полетает и обязательно вернётся! Ждите!

(0)

Видео

00:00:10

Футаж на зеленом фоне (Балерина танцует)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:07

Футаж на зеленом фоне (Винни идет)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:07

Футаж на зеленом фоне (Винни на месте)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:14

Футаж на зеленом фоне (Винни на шарике)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:04:15

7Б - Птица RMX

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0

Получить бонус

Еще бонусы тут

Моментальный обмен WebMoney

Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки

Кошелек
Код Защитный код

Обмен Webmoney

Бонус

BAKSGRAD.RU
Обновить Код.