jQuery tabs - пример табов на JavaScript

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

Вот пример как это выглядят табы:

Вкладка 1
Вкладка 2
Вкладка 3

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

Ниже приведен код использования табов:

<html>
    <head>
        <title>Пример табов на JavaScript | Дизайн студия OX2</title>
        <script type="text/javascript" src="http://ox2.ru/lib/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="http://ox2.ru/files/tabs-ox2.js"></script>
        <link href='http://ox2.ru/files/tabs-ox2.css' rel='stylesheet' type='text/css'>
        <style type="text/css">
            /* Максимальная ширина табов (если удалить то будет 100%) */
            .tabs-ox2 {
                max-width: 500px
            }
            /* Не активная вкладка */
            .tabs-ox2 ul:first-child li {
                background-color: #fbfbfb;
                border: 1px solid #E5E5E5;
            }
            /* При наведении на вкладку */
            .tabs-ox2 ul:first-child li:hover {
                background-color: #f5f5f5;
            }
            /* Активная вкладка */
            .tabs-ox2 ul:first-child li.active {
                background-color: white;
                border-bottom: 0;
            }

            /* Дизайн контента вкладок */
            .tabs-ox2 ul:last-child {
                border: 1px solid #E5E5E5;
            }
        </style>
    </head>
    <body>
        <div class="tabs-ox2">
            <ul>
                <li class="active">Вкладка 1</li>
                <li>Вкладка 2</li>
                <li>Вкладка 3</li>
            </ul>
            <ul>
                <li>Содержимое вкладки номер 1</li>
                <li>Содержимое вкладки номер 21</li>
                <li>Содержимое вкладки номер 3 </li>
            </ul>
        </div>
    </body>
</html>

Пример состоит из 2-ух частей, первая часть это настройка дизайна вкладок с помощью css-стилей, вторая часть это html-код вывода вкладок.

Если у тега li сделать class="active", то вкладка будет по-умолчанию активной.

Скачать пример

Предыдущая статья Вернуться

jQuery tabs - пример табов на JavaScript

Комментарии

Заполните все поля

Написать комментарий

Ваше имя
Комментарий