Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit4475aff

Browse files
committed
Third Project - How To Create Tab Using HTML, CSS and JavaScript
1 parent65bbfb6 commit4475aff

File tree

3 files changed

+117
-0
lines changed

3 files changed

+117
-0
lines changed
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6+
<linkrel="stylesheet"href="style.css"/>
7+
<title>H-tab</title>
8+
</head>
9+
<body>
10+
<divclass="tab-container">
11+
<divclass="tab-header">
12+
<buttonclass="btn"data-target-tab="#html">HTML</button>
13+
<buttonclass="btn active"data-target-tab="#css">CSS</button>
14+
<buttonclass="btn"data-target-tab="#js">JavaScript</button>
15+
</div>
16+
<divclass="tab-body">
17+
<divclass="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+
<divclass="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+
<divclass="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+
<scriptsrc="script.js"></script>
48+
</body>
49+
</html>
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
constbtns=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+
consttabContents=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+
});
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.5rem2rem;
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:5px5px00;
38+
}
39+
40+
.tab-body {
41+
padding:0.5rem1rem;
42+
}
43+
44+
.tab-content {
45+
display: none;
46+
}
47+
48+
.tab-content.active {
49+
display: block;
50+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp