<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать вкладки на чистом CSS

Как сделать вкладки на чистом CSS

На этом уроке мы научимся делать простые вкладки на чистом CSS и никакого JavaScript. В ряде случаев этого решения вполне достаточно, ограничиваясь возможностями только CSS стилей.

HTML код

Сначала создадим обертку для вкладок с классом wrap. Затем блок для вкладок tabs, навигацию для переключения вкладок tabs__items, вкладки-ссылки tabs__item. В адресах ссылок пропишем названия-якоря и точно такие же названия укажем в идентификаторах у текстовых блоков, таким образом связав их между собой. Далее создадим три блока с содержимым табов tab__box.

<div class="wrap">
  <div class="tabs">
    <nav class="tabs__items">
      <a href="#tablink_01" class="tabs__item"><span>Вкладка #1</span></a>
      <a href="#tablink_02" class="tabs__item"><span>Вкладка #2</span></a>
      <a href="#tablink_03" class="tabs__item"><span>Вкладка #3</span></a>
    </nav>
    <div>
      <div id="tablink_01" class="tab__box">
        рыба-текст
      </div>
      <div id="tablink_02" class="tab__box">
        рыба-текст
      </div>
      <div id="tablink_03" class="tab__box">
        рыба-текст
      </div>
    </div>
  </div>
</div>

CSS код

Сделаем для обертки отступ сверху, ограничим ее по ширине и расположим по середине.

.wrap {
    padding: 40px 0;
    max-width: 900px;
    margin: 0 auto;
}

Сделаем оболочку для табов флекс-контейнером, для построения табов в один ряд.

.tabs__items {
    display: flex;
}

Поделим поровну пространство для табов и так же сделаем их контейнером для ссылок.

.tabs__item {
    flex: 0 1 33.333%; // управление размерами вкладок
    height: 50px; // высота вкладок
    display: flex;
    justify-content: center; // центрирование по горизонтали
    align-items: center; // центрирование по вертикали
    text-transform: uppercase; // перевод в верхний регистр
    color: #fff; // цвет ссылок
    text-decoration: none; // убираем подчеркивание ссылок
}

Изначально все вкладки нужно спрятать.

.tab__box {
    position: relative; // относительное позиционирование
    padding: 20px; // внутренние отступы
    font-size: 18px;
    line-height: 24px;
    display: none; // вкладки скрыты
}

Как добиться, чтобы при нажатии на вкладку, показалось ее содержимое? Поможет нам псевдо-класс :target, который при клике по цели, применит заданный стиль к элементу с якорем.

.tab__box:target {
    display: block; // покажет содержимое при клике
}

Мы хотим, чтобы при клике, сам таб и бокс с контентом меняли цвет фона и здесь без псевдоэлемента никак не обойтись. Создадим для вкладок с контентом пустые блоки при помощи псевдоэлемент :before.

.tab__box:before {
    content: "";
    height: 50px;
    width: 33.333%;
    position: absolute;
    top: -50px;
}

Покрасим все блоки в два разных цвета, обратившись к каждому через псевдокласс :nth-child.

.tab__box:nth-child(1) {
    background-color: #3fc1c9;
}
.tab__box:nth-child(1):before {
    background-color: #3fc1c9;
    left: 0;
}
.tab__box:nth-child(2) {
    background-color: #fc5185;
}
.tab__box:nth-child(2):before {
    background-color: #fc5185;
    left: 33.333%;
}
.tab__box:nth-child(3) {
    background-color: #3fc1c9;
}
.tab__box:nth-child(3):before {
    background-color: #3fc1c9;
    right: 0;
}

Цветной фон перекрывает меню навигации, поэтому переместим надпись на слой выше.

.tabs__item span {
    position: relative;
    z-index: 2;
}

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.