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

Изучаем создание вкладок в HTML: простой пример кода для добавления веб-странице интерактивности и удобства навигации.

Для создания вкладок в HTML можно использовать теги <div> и <input> с атрибутом type="radio". Это позволит нам создать визуальные вкладки с помощью CSS и связать их с радиокнопками, чтобы при выборе одной вкладки отображалось соответствующее содержимое.

Вот как это можно реализовать:

<div class="tabs">
  <input type="radio" id="tab1" name="tab-group" checked />
  <label for="tab1">Вкладка 1</label>
  <div class="tab">
    Содержимое вкладки 1
  </div>

  <input type="radio" id="tab2" name="tab-group" />
  <label for="tab2">Вкладка 2</label>
  <div class="tab">
    Содержимое вкладки 2
  </div>

  <input type="radio" id="tab3" name="tab-group" />
  <label for="tab3">Вкладка 3</label>
  <div class="tab">
    Содержимое вкладки 3
  </div>
</div>

В данном примере мы создали контейнер для вкладок с классом tabs. Внутри этого контейнера мы разместили радиокнопки с соответствующими метками и содержимым вкладок. С помощью CSS можно стилизовать вкладки и скрывать/показывать содержимое при выборе определенной вкладки.

Это простой способ создания вкладок в HTML, который может быть легко настроен с помощью CSS и JavaScript для улучшения пользовательского опыта.