x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-05 17:26:14 +03:00 committed by GitHub
parent 3ba4b3fad9
commit 4323c5e4c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
100_projects/12-create-tabs/index.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="tabs">
<li class="active" data-cont=".one">Tab 1</li>
<li data-cont=".two">Tab 2</li>
<li data-cont=".three">Tab 3</li>
<li data-cont=".four">Tab 4</li>
<li data-cont=".five">Tab 5</li>
</ul>
<div class="content">
<div class="one">Content 1
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.</P>
</div>
<div class="two">Content 2
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse earum nam fugit odit totam quaerat minus, nobis illo quia officiis iste
</P>
</div>
<div class="three">Content 3
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laborum nisi id? Eius eaque expedita ex. Ipsam, repudiandae. Dignissimos delectus suscipit voluptatem eum possimus facere dolor laborum recusandae dolorum vero.
</P>
</div>
<div class="four">Content 4
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.</P>
</div>
<div class="five">Content 5
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laborum nisi id? Eius eaque expedita ex. Ipsam, repudiandae. Dignissimos delectus suscipit voluptatem eum possimus facere dolor laborum recusandae dolorum vero.</P>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

17
100_projects/12-create-tabs/main.js Normal file
View File

@ -0,0 +1,17 @@
let tabs = document.querySelectorAll(".tabs li");
let tabsArray = Array.from(tabs);
let divs = document.querySelectorAll(".content > div");
let divsArray = Array.from(divs);
tabsArray.forEach((ele) => {
ele.addEventListener("click", function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove("active");
});
e.currentTarget.classList.add("active");
divsArray.forEach((div) => {
div.style.display = "none";
});
document.querySelector(e.currentTarget.dataset.cont).style.display = "block";
});
});

46
100_projects/12-create-tabs/style.css Normal file
View File

@ -0,0 +1,46 @@
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
min-height: 100vh;
background:#E9BF8B;
color: #fff;
}
.tabs {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.tabs li {
padding: 10px;
background-color: #2C2D2A;
cursor: pointer;
transition: 0.2s;
border-bottom: 1px solid #2C2D2A;
border-left: 1px solid #2C2D2A;
border-right: 1px solid #1C1C1C;
}
.tabs li.active,
.tabs li:hover{
background-color: #151716;
border-left: 1px solid #2C2D2A;
border-bottom: 1px solid #E9BF8B;
}
.content {
display: flex;
align-self: center;
background-color: #2C2D2A;
width: 305px;
height: 335px;
}
.content > div {
padding: 20px;
}
.content > div:not(:first-child) {
display: none;
}