Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

КАК СДЕЛАТЬ

Главная

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

КНОПКИ

Кнопки оповещенияКонтур кнопокКнопка с разделениемАнимированные кнопкиИзменяющиеся кнопкиКнопка на изображенииКнопки социальных сетейКнопки читать больше/меньшеКнопки загрузокКнопка скачатьКнопка таблеткаКнопка уведомленияКнопки значкиКнопки вперед и назадДополнительная кнопкаКнопка блокКнопка текстКруглые кнопкиКнопка прокрутки вверх

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

ФИЛЬТРЫ

Фильтр спискаФильтр таблицыФильтр элементовФильтр выпадающего спискаСортировка спискаСортировка таблицы

ТАБЛИЦЫ

Полосатая таблицаОтзывчивая таблицаТаблица сравнения

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

ВЕБ САЙТ

Сделать сайтСделать сайт (W3.CSS)Сделать сайт (BS3)Сделать сайт (BS4)Страница по центруРаздел контактаБольшой заголовокПример сайта

СЕТКА

2 Колонки макета3 Колонки макета4 Колонки макетаСетка расширяющаясяВид сетки и спискаСмешанные столбцы макетаСтолбцы карточекЗигзагообразный макетМакет блога

GOOGLE

Google графикGoogle шрифты

КОНВЕРТОРЫ

Конвертер массыКонвертер температурыКонвертер длиныКонвертер скорости

PYTHON

Удалить список дубликатовРеверс строки



Как сделать - Вкладки



Узнать, как создать вкладки с помощью CSS и JavaScript.


Вкладки

Вкладки идеально подходят для одностраничных веб-приложений или для веб-страниц, способных отображать различные темы:

Лондон

Лондон является столицей Англии.

Париж

Париж является столицей Франции.

Токио

Токио является столицей Японии.

Попробуйте сами »


Создание переключаемых вкладок

Шаг 1) Добавить HTML:
<!-- Ссылки вкладки -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">Лондон</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Париж</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Токио</button>
</div>

<!-- Содержимое вкладки -->
<div id="London" class="tabcontent">
  <h3>Лондон</h3>
  <p>Лондон является столицей Англии.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Париж</h3>
  <p>Париж является столицей Франции.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Токио</h3>
  <p>Токио является столицей Японии.</p>
</div>

Создание кнопок для открытия определенного содержимого вкладки. Все элементы <div> с class="tabcontent" скрыты по умолчанию (с помощью CSS и JS). Когда пользователь нажимает на кнопку, он открывает содержимое вкладки, которое "соответствует" этой кнопке.


Шаг 2) Добавить CSS:

Стиль кнопок и содержимого вкладки:

/* Стиль вкладки */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Стиль кнопок, которые используются для открытия содержимого вкладки */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Изменение цвета фона кнопок при наведении курсора */
.tab button:hover {
  background-color: #ddd;
}

/* Создание активного/текущего класса связи вкладки */
.tab button.active {
  background-color: #ccc;
}

/* Стиль содержимого вкладки */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


Шаг 3) Добавить JavaScript:
function openCity(evt, cityName) {
  // Объявить все переменные
  var i, tabcontent, tablinks;

  // Получить все элементы с помощью class="tabcontent" и спрятать их
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Получить все элементы с помощью class="tablinks" и удалить class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Показать текущую вкладку и добавить "active" класс для кнопки, которая открыла вкладку
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
Попробуйте сами »

Вкладки исчезают:

Если вы хотите скрыть содержимое вкладки, добавьте следующий CSS:

.tabcontent {
  animation: fadeEffect 1s; /* Эффект затухания занимает 1 секунду */
}

/* Перейти от нуля к полной непрозрачности */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
Попробуйте сами »

Показывать вкладку по умолчанию

Чтобы открыть определенную вкладку при загрузке страницы, используйте JavaScript, чтобы "нажать" на указанную кнопку вкладки:

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">Лондон</button>

<script>
// Получить элемент с помощью id="defaultOpen" и нажмите на нее
document.getElementById("defaultOpen").click();
</script>
Попробуйте сами »

Закрыть вкладку

Если вы хотите закрыть определенную вкладку, используйте JavaScript, чтобы скрыть вкладку одним нажатием кнопки:

<!-- Нажмите на кнопку элемент <span> для закрытия вкладки -->

<div id="London" class="tabcontent">
  <h3>Лондон</h3>
  <p>Лондон является столицей Англии.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>
Попробуйте сами »

Совет: Также, посмотрите Как сделать - Вертикальные вкладки.



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

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

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.