Как сделать вкладки html на сайте

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

Пример вкладок:

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: #000000; } .tabs>label { display: inline-block; padding: 7px; margin: 0 -5px -1px 0; text-align: center; color: green; border: 1px solid #C0C0C0; background: #000000; cursor: pointer; } .tabs>input:checked + label { color: #000000; border: 1px solid #C0C0C0; border-bottom: 1px solid #FFFFFF; background: #00ff40; } #tab_1:checked ~ #txt_1, #tab_2:checked ~ #txt_2, #tab_3:checked ~ #txt_3 { display: block; }

Произвольное содержимое…

Произвольное содержимое…

Произвольное содержимое…

Вторая вкладка

Размеры содержимого вкладок

могут отличаться по высоте!


Для того, что бы разместить на сайте HTML вкладки как приведены в примере. Нужно разместить в том месте где должны быть вкладки HTML код:

<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>


    <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>

Так же нужно разместить между тегами <head>…</head> CSS стили

<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: green;/*Цвет фона не открытых вкладок*/
    border: 1px solid #C0C0C0;
    background: #000000;/*Цвет фона названия не выбранных вкладок*/
    cursor: pointer;
}
.tabs>input:checked + label {
    color: #000000;/*Цвет названия выбранной вкладки*/
    border: 1px solid #C0C0C0;
    border-bottom: 1px solid #FFFFFF;
    background: #00ff40;/*Цвет фона названия выбранной вкладки*/
}
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3 { display: block; }
</style>

Поставить CSS можно уже в теле страницы, но это обязательно нужно сделать перед кодом вкладок.



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

+ 84 = 88