регистрация
856материалов
3325комментариев
235тем на форуме
7003пользователя

Вкладки на 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
Материал просмотрен: 1772 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 11 комментариев

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

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


71_nik
Николай @71_nik 10.09.2015 22:462
+6
Однозначно забираю! Вещь хорошая!
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
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 2
Пользователей: 0