Вкладки на JavaScript для uCoz
827материалов
228тем на форуме
3003комментария
6151пользователь

Вкладки на JavaScript для uCoz


Описание скрипта:

Симпатичный и легкий вкладки на JavaScript для Вашего сайта в системе uCoz, которые можно использовать для сортировки информации, чтобы она не была вся в куче, а была поделена по категориям. Например у нас такая ситуация, Ваш сайт имеет в социальных сетях сообщества, а вставлять все виджеты с этих сообществ в один столбик как кто не очень для портала, а с помощью данных табов можно сделать переключатель между виджетов.

Установка:

Для начала в CSS вставляете код:
Код
.body {
       font-family: "PT Sans";
       font-size: 16px;
       line-height: 1.5;
       }

       .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 между <head> и </head>:
Код
<script src="http://webmaster-ucoz.ru/ucoz/1/js/puretabs.js"></script>

Где хотите видеть вкладки:
Код
<div class="body">
<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>
</div>

И перед </body> вставляете:
Код
<script>
        pureTabs.init('tabs__link', 'tabs__link--active');
</script>


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

  • var className = 'tab', // Общий класс ссылок
  • activeClassName = 'tab--active' // Класс активной ссылки
  • pureTabs.init(className, activeClassName);

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 10.09.2015 в 20:00
Материал просмотрен: 1269 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 11 комментариев

Пожаловаться
Сказать спасибо
Источник

11 комментариев


Albina-Danes
Классно laughing
71_nik
Николай @71_nik 10.09.2015 22:462
+6
Однозначно забираю! Вещь хорошая! like
Roman
Роман Сергеев @Roman 15.09.2015 14:053
+1
Уже, по-моему, уже были такие вкладки
Bobwelder
Владимир @Bobwelder 18.10.2015 19:174
0
чет не работает , скрипты выводящие текст вылезли во всех вкладках друг за другом а должны бить каждый в своей вкладке!
Ромчик
Ссылку на сайт дайте
trem200
Александр @trem200 12.02.2016 19:176
0
А эти вкладки можно использовать в каталогах файлах
Ромчик
Хоть на персональной странице
trem200
Александр @trem200 12.02.2016 19:448
0
Спасибо за ответ. Ещё вопрос! Можно ли в эти вкладки запихнуть код описания файлов, к примеру в добавленных файлах будут эти вкладки, и что бы увидеть скриншоты или описание, то лучше всего переключится на соответствующую вкладку.
Ромчик
Ну конечно можно
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта