В сегодняшнем руководстве мы узнаем, как создавать вкладки. Для создания этих вкладок нам понадобятся HTML, CSS и Javascript. Прежде чем мы узнаем, как их создавать, давайте сначала посмотрим, что такое вкладки.
Вкладки - это элементы навигации, используемые для сортировки и отображения соответствующей информации. Эта информация обычно состоит из двух частей. Первая часть - это заголовок вкладки, а вторая часть - описание вкладки. Вкладки позволяют пользователям быстро просматривать информацию, легко переключаясь между ней.
Если вы хотите писать вместе со мной, вы можете посмотреть видеоверсию этого руководства здесь, вверху страницы. Кроме того, я публикую новое видео каждый следующий день. Поэтому подпишитесь на мой канал ВКонтакте или Boosty, чтобы получить доступ к этим руководствам.
Структура папок проекта:
Мы начинаем с создания структуры папок проекта. Папка проекта – Tabs . Внутри папки проекта у нас есть три файла. Этими файлами являются index.html, style.css и script.js. Это HTML-документ, таблица стилей и файл сценария соответственно.
Сначала мы начинаем кодировать HTML. Теперь скопируйте приведенный ниже код и вставьте его в свой HTML-файл.
HTML состоит из div с классом под названием container. Внутри контейнера у нас есть два div с class – tabs и tab-content соответственно. Раздел tabs содержит три h3 тега. Один из этих тегов h3 имеет класс active.
Содержимое вкладки состоит из трех разделов. У каждого из этих разделов есть h4 тег и p tag. Даже у одной из этих вкладок есть активный класс.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabs</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="tabs">
<h3 class="active">Tab 1</h3>
<h3>Tab 2</h3>
<h3>Tab 3</h3>
</div>
<div class="tab-content">
<div class="active">
<h4>First Title</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore
explicabo cum dolores hic possimus aut corrupti quisquam aperiam
quia veniam inventore officiis nam error sunt libero, commodi
architecto reiciendis qui fuga, itaque delectus quidem sequi.
Impedit natus culpa nihil aperiam adipisci aliquam error, suscipit
odio? Error sed esse perspiciatis quasi velit, ratione odit
architecto? Explicabo pariatur.
</p>
</div>
<div>
<h4>Second Title</h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti,
fugiat ab? Accusamus sed a iusto? Placeat incidunt repudiandae vero
magnam nihil tempore quasi earum illum totam aut delectus aliquam
pariatur, iste, qui provident quo voluptatem neque facere id
laudantium aliquid numquam nisi accusantium. Inventore reiciendis
nulla, iste perferendis.
</p>
</div>
<div>
<h4>Third Title</h4>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat
autem accusantium voluptate debitis ipsa animi aliquid dolore?
Suscipit consequatur architecto ullam perferendis praesentium sed
aliquid voluptatem quibusdam laborum, doloremque aut atque debitis
et laudantium qui veniam eligendi accusamus ipsam optio, assumenda
aliquam ipsum dolorem similique?
</p>
</div>
</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
Теперь для оформления этих вкладок мы используем CSS. На следующем шаге скопируйте приведенный ниже код и вставьте его в свою таблицу стилей.
Мы начинаем с удаления отступов и полей со всех элементов. Затем мы устанавливаем цвет фона на #4d5bf9. Мы используем преобразования для центрирования container.
Мы используем макет сетки для размещения вкладок. Изначально мы настраиваем отображение всех элементов div внутри tab-content. Мы используем active класс для установки содержимого вкладок в положение "Назад, чтобы блокировать отображение". Мы добавляем и удаляем этот активный класс с помощью javascript.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #4d5bf9;
}
.container {
width: 80vmin;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 120px;
background-color: #ffffff;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
h3 {
background-color: #e4e9fd;
text-align: center;
padding: 15px 0;
cursor: pointer;
font-weight: 600;
}
.tab-content {
background-color: #ffffff;
padding: 50px 40px;
}
.tab-content h4 {
font-size: 28px;
margin-bottom: 20px;
color: #000224;
font-weight: 600;
}
.tab-content p {
text-align: justify;
line-height: 1.9;
letter-spacing: 0.4px;
color: #202238;
}
.tab-content div {
display: none;
}
.tab-content .active {
display: block;
}
.tabs .active {
background-color: #ffffff;
color: #4d5bf9;
}
На последнем шаге мы добавим функциональность к этим вкладкам с помощью javascript. Чтобы добавить javascript в ваш код, скопируйте приведенный ниже код и вставьте его в файл вашего скрипта.
Сначала мы выбираем h3 элементы внутри tabs и div элементы внутри вкладки-content. Мы присваиваем им две разные переменные. На следующем шаге мы добавим прослушиватель событий щелчка к каждой из этих вкладок. При нажатии на вкладку активный класс добавляется к содержимому соответствующей вкладки. В то же время active класс удаляется из любого другого содержимого вкладки, к которому он был применен.
let tabs = document.querySelectorAll(".tabs h3");
let tabContents = document.querySelectorAll(".tab-content div");
tabs.forEach((tab, index) => {
tab.addEventListener("click", () => {
tabContents.forEach((content) => {
content.classList.remove("active");
});
tabs.forEach((tab) => {
tab.classList.remove("active");
});
tabContents[index].classList.add("active");
tabs[index].classList.add("active");
});
});
Теперь наши вкладки готовы. Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
0 Комментарии