наверх





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


Вкладки на странице можно сделать различными способами: применить JS, применить PHP, применить JS и PHP и сделать вкладку с сессиями, чтобы открытая вкладка отображалась и после перезахода на странице. Но мы будем делать простой вид вкладки, на HTML и CSS, однако такой способ будет ненадежным и в некоторых старых браузерах эти вкладки отображаться не будут.

Небольшую часть кода позаимствуем с примера создания модального окна.

HTML


<div class="tabsLink">
        <a href="#tab1">Вкладка 1</a>
        <a href="#tab2">Вкладка 2</a>
        </div>
        
        <br>
        <a class="tabs" id="tab1"></a>
        <div class="tab">
        Вкладка 1 <br>
        </div>
        
        <a class="tabs" id="tab2"></a>
        <div class="tab">
    Вкладка 2 <br>
        </div>


Как видите, код реально немного схож с кодом модального окна, в CSS будет тоже немного похож.

CSS



Изначально нужно сделать, что бы вкладки были невидны, для этого используем свойство visibility:

.tabs {
    opacity: 0;  /* Прозрачность */
    visibility: hidden; /* Изначально - спрятан */
}


Так же необходимо сделать и с классом tab:

.tab{
    position:absolute; /* Абсолютное позиционирование */
    visibility: hidden;    /* Изначально - спрятан */
    z-index: 10;    /* z-index */
    color:#478CFB; /* Цвет */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
}


Теперь необходимо сделать так, чтобы вкладки появились при клике. Для этого нам поможет псевдокласс :target, который как раз и работает с ссылками-якорями:

.tabs:target+.tab {
    opacity: 1; /* Убирает прозрачность */
    visibility: visible; /* Делает видимым */
}


Вот и все. Осталось лишь украсить сам вид вкладок, однако это не так важно и не повлияет на сам процесс:

.tabsLink a{
    background-color:#478CFB; /* Цвет */
    padding:5px; /* Внутренние отступы */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
    color:#fff; /* Цвет */
    text-decoration:none; /* Отсутствие нижней линии */
    
    /* Округление старт */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Округление конец */
}





Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 5


varfj54j 02 февраля, 21:55 ответить #

Здравствуйте, очень помогла ваша статья, спасибо. Tсть одна просьба, помогите разобраться, с вкладками на одной из вкладок. Так все вроде бы сделал, но вот при переходе на вкладку 2_1, которая находится в вкладке 2, пропадает информация с вкладки 2 и информация о самих вкладка 2_1 и 2_2. Как это можно исправить средствами CSS?

varfj54j 02 февраля, 23:45 ответить #

Здравствуйте, очень помогла ваша статья, спасибо. Tсть одна просьба, помогите разобраться, с вкладками на одной из вкладок. Так все вроде бы сделал, но вот при переходе на вкладку 2_1, которая находится в вкладке 2, пропадает информация с вкладки 2 и информация о самих вкладка 2_1 и 2_2. Как это можно исправить средствами CSS?

mgorban 24 ноября, 01:21 ответить #

Спасибо за пост.. но есть один вопрос. Размещаю вкладки, и при переходе с одной на другую весь сайт поднимается вверх экрана.. что очень не удобно. как это можно исправить?

mgorban 24 ноября, 01:30 ответить #

Спасибо за пост.. но есть один вопрос. Размещаю вкладки, и при переходе с одной на другую весь сайт поднимается вверх экрана.. что очень не удобно. как это можно исправить?

mgorban 30 июня, 13:01 ответить #

Спасибо за статью, только остался один вопрос. А можно сделать так чтобы первая вкладка была активной т.е. уже открыта?

У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.