Skip to content

Commit 4475aff

Browse files
Basir-PDBasir-PD
committed
Third Project - How To Create Tab Using HTML, CSS and JavaScript
1 parent 65bbfb6 commit 4475aff

3 files changed

Lines changed: 117 additions & 0 deletions

File tree

‎3 - How To Create Tab Using HTML, CSS and JavaScript/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>H-tab</title>
8+
</head>
9+
<body>
10+
<div class="tab-container">
11+
<div class="tab-header">
12+
<button class="btn" data-target-tab="#html">HTML</button>
13+
<button class="btn active" data-target-tab="#css">CSS</button>
14+
<button class="btn" data-target-tab="#js">JavaScript</button>
15+
</div>
16+
<div class="tab-body">
17+
<div class="tab-content" id="html">
18+
<h3>HTML</h3>
19+
<p>
20+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
21+
voluptatibus perspiciatis aspernatur fugit similique cumque dolores
22+
assumenda totam eius ab, iusto unde deleniti ex fugiat modi placeat,
23+
nam porro iste.
24+
</p>
25+
</div>
26+
<div class="tab-content active" id="css">
27+
<h3>CSS</h3>
28+
<p>
29+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
30+
voluptatibus perspiciatis aspernatur fugit similique cumque dolores
31+
assumenda totam eius ab, iusto unde deleniti ex fugiat modi placeat,
32+
nam porro iste.
33+
</p>
34+
</div>
35+
<div class="tab-content" id="js">
36+
<h3>JavaScript</h3>
37+
<p>
38+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
39+
voluptatibus perspiciatis aspernatur fugit similique cumque dolores
40+
assumenda totam eius ab, iusto unde deleniti ex fugiat modi placeat,
41+
nam porro iste.
42+
</p>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<script src="script.js"></script>
48+
</body>
49+
</html>

‎3 - How To Create Tab Using HTML, CSS and JavaScript/script.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const btns = document.querySelectorAll(".btn");
2+
3+
btns.forEach((btn) => {
4+
btn.addEventListener("click", () => {
5+
btns.forEach((btn) => btn.classList.remove("active"));
6+
7+
btn.classList.add("active");
8+
const tabContents = document.querySelectorAll(".tab-content");
9+
10+
// tabContents.forEach((tabContent) => {
11+
// tabContent.className = tabContent.className.replace("active", "");
12+
// });
13+
14+
tabContents.forEach((tab) => tab.classList.remove("active"));
15+
16+
document.querySelector(btn.dataset.targetTab).classList.add("active");
17+
});
18+
});

‎3 - How To Create Tab Using HTML, CSS and JavaScript/style.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body {
2+
margin: 0;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
8+
line-height: 1.5;
9+
font-size: 1.25rem;
10+
}
11+
12+
.tab-container {
13+
width: 992px;
14+
margin: 0 auto;
15+
}
16+
17+
.tab-header {
18+
display: flex;
19+
border-bottom: 1px solid #ccc;
20+
}
21+
22+
.btn {
23+
position: relative;
24+
top: 1px;
25+
/* width: 33.3%; */
26+
background-color: transparent;
27+
border: none;
28+
outline: none;
29+
padding: 0.5rem 2rem;
30+
font-size: 1.25rem;
31+
border-bottom: 1px solid #ccc;
32+
}
33+
34+
.btn.active {
35+
border: 1px solid #ccc;
36+
border-bottom-color: #fff;
37+
border-radius: 5px 5px 0 0;
38+
}
39+
40+
.tab-body {
41+
padding: 0.5rem 1rem;
42+
}
43+
44+
.tab-content {
45+
display: none;
46+
}
47+
48+
.tab-content.active {
49+
display: block;
50+
}

0 commit comments

Comments
 (0)