Создание вкладок при помощи HTML и CSS

В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.

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

При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.

Наш скрипт является легким и быстрым т.к. не использует jаvascript код или какие-либо плагины и библиотеки.

Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление также можно легко изменить.

<div class="tabs">
    <input type="radio" name="inset" value="" id="tab_1" checked>
    <label for="tab_1">Вкладка №1</label>

    <input type="radio" name="inset" value="" id="tab_2">
    <label for="tab_2">Вкладка №2</label>

    <input type="radio" name="inset" value="" id="tab_3">
    <label for="tab_3">Вкладка №3</label>

    <input type="radio" name="inset" value="" id="tab_4">
    <label for="tab_4">Вкладка №4</label>

    <div id="txt_1">
        <p>Произвольное содержимое...</p>
        <p>Произвольное содержимое...</p>
        <p>Произвольное содержимое...</p>
    </div>
    <div id="txt_2">
        <p>Вторая вкладка</p>
    </div>
    <div id="txt_3">
        <p>Размеры содержимого вкладок</p>
        <p>могут отличаться по высоте!</p>
    </div>
    <div id="txt_4">
        <img src="image/logo.png" width="533" height="77" alt="Лого">
    </div>
</div>

Для того чтобы вкладки функционировали и были похожи на те, что приведены в примере выше, в шапке сайта между тегами <head> и </head> добавьте следующие стили оформления:

<style type="text/css">
.tabs { width: 100%; padding: 0px; margin: 0 auto; }
.tabs>input { display: none; }
.tabs>div {
    display: none;
    padding: 12px;
    border: 1px solid #C0C0C0;
    background: #FFFFFF;
}
.tabs>label {
    display: inline-block;
    padding: 7px;
    margin: 0 -5px -1px 0;
    text-align: center;
    color: #666666;
    border: 1px solid #C0C0C0;
    background: #E0E0E0;
    cursor: pointer;
}
.tabs>input:checked + label {
    color: #000000;
    border: 1px solid #C0C0C0;
    border-bottom: 1px solid #FFFFFF;
    background: #FFFFFF;
}
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 { display: block; }
</style>

В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.

Внимание! Создание вкладок при помощи HTML и CSS предоставлен пользователями сайта исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

admin

Автор публикации

Рейтинг новости: 0 Просмотрено: 232

Kylshop 5.3 + Юmoney и Юkassa KEYGEN

С помощью плагина Kylshop, вы можете создать полноценный интернет магазин для продажи физических товаров, цифровых товаров и продажи ключей разных программ или игр.

[Xenforo] Коллекция продуктов XF2 Essential Suite v1.0.0

XF2 Essential Suite предлагает все, что вам нужно, чтобы вывести ваш форум на новый уровень, независимо от того, являетесь ли вы маленьким или большим игроком.

Комментарии к Создание вкладок при помощи HTML и CSS

Добавить Комментарий

В комментариях запрещаются спам, а также реклама любых товаров и услуг, иных ресурсов.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Смотрите также: