Наше прошлое 20072009201120132014
г. Москва, ул. Гостиничная, д. 7А. кор.2
8 (499) 404-26-56
пн-пт 11:00 - 19:00
 

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", то вкладка будет по-умолчанию активной. 

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

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

Комментарии

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

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

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

Ваше имя

Комментарий