Как создать вкладки с анимированным индикатором используя HTML CSS и JavaScript
Узнайте, как создать вкладки с анимированным индикатором используя HTML CSS и jаvascript! Независимо от того, новичок вы или опытный разработчик, это руководство проведет вас через создание вкладок для сайта. Следуйте инструкциям и начните развивать свои навыки веб-разработки уже сегодня! Улучшите свои навыки веб-разработки, создав вкладки с анимированным индикатором с помощью данного видео руководства. Идеально подходит для начинающих и разработчиков среднего уровня, желающих создавать что то своё. Смотрите сейчас и начинайте кодировать!
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом по ссылке, указанной ниже.. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Исходные файлы HTML,
- Исходные файлы CSS,
- Исходные файлы jаvascript,
- Иконки шрифтов,
- Файлы библиотеки и плагинов,
Совместимые браузеры
- Firefox,
- Safari,
- Edge,
- Opera,
- Chrome,
- Yandex,
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tas Layout - jаvascript</title>
<!--css file-->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="wrapper">
<div class="tabs">
<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="indicator"></div>
</div>
<div class="tab-content">
<div class="active">
<h4>First Title</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
provident aspernatur laudantium non veniam, atque hic, fugit tenetur
dicta repellat aliquid saepe eveniet blanditiis autem necessitatibus
in, explicabo illo neque ex vitae impedit nobis mollitia porro?
Quibusdam obcaecati in voluptatem.
</p>
</div>
<div>
<h4>Second Title</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
provident aspernatur laudantium non veniam, atque hic, fugit tenetur
dicta repellat aliquid saepe eveniet blanditiis autem necessitatibus
in, explicabo illo neque ex vitae impedit nobis mollitia porro?
Quibusdam obcaecati in voluptatem.
</p>
</div>
<div>
<h4>Third Title</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
provident aspernatur laudantium non veniam, atque hic, fugit tenetur
dicta repellat aliquid saepe eveniet blanditiis autem necessitatibus
in, explicabo illo neque ex vitae impedit nobis mollitia porro?
Quibusdam obcaecati in voluptatem.
</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS КОД:
/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #f2f2f2;
}
.wrapper {
position: absolute;
top: 120px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 400px;
background: #fff;
padding: 20px;
-webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
border-radius: 5px;
overflow: hidden;
}
.tabs {
position: relative;
width: 100%;
height: 40px;
background: #f2f2f2;
border-radius: 5px;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}
.tab {
font-size: 16px;
font-weight: 600;
text-align: center;
line-height: 40px;
text-transform: uppercase;
cursor: pointer;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
z-index: 2;
}
.tab.active {
color: #fff;
}
.indicator {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 100%;
background: #4070f4;
border-radius: 5px;
z-index: 1;
-webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}
.tab-content h4 {
font-size: 20px;
margin: 15px 0;
}
.tab-content p {
text-align: justify;
}JS КОД:
let tabs = document.querySelectorAll(".tab");
let tabContents = document.querySelectorAll(".tab-content div");
let indicator = document.querySelector(".indicator");
tabs.forEach((tab, index) => {
tab.addEventListener("click", () => {
tabs.forEach((tabItem) => tabItem.classList.remove("active"));
tabContents.forEach((tabContent) => tabContent.classList.remove("active"));
tab.classList.add("active");
indicator.style.left = index * 120 + "px";
tabContents[index].classList.add("active");
});
});
