Skip to content

Commit 24bbb88

Browse files
author
jessicarush
committed
Initial commit
1 parent 8d450a6 commit 24bbb88

File tree

4 files changed

+149
-0
lines changed

4 files changed

+149
-0
lines changed

‎css_tabs_simple/base.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
19+
/* DEFAULTS --------------------------------------------------------------- */
20+
21+
html {
22+
color: var(--main-color);
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
}
27+
28+
/* TYPOGRAPHY ------------------------------------------------------------- */
29+
30+
.primary-heading {
31+
color: var(--heading-color);
32+
font-family: var(--heading-font);
33+
font-size: 2rem;
34+
font-weight: 400;
35+
}
36+
37+
.highlight-text {
38+
color: var(--emphasis-color);
39+
}
40+
41+
42+
/* LINKS & BUTTONS -------------------------------------------------------- */
43+
44+
/* LAYOUT ----------------------------------------------------------------- */
45+
46+
.container {
47+
max-width: 800px;
48+
border: solid 1px silver;
49+
}
50+
51+
/* COMPONENTS ------------------------------------------------------------- */
52+
53+
/* COSMETIC --------------------------------------------------------------- */
54+
55+
/* UTILITY ---------------------------------------------------------------- */
56+
57+
/* STATE ------------------------------------------------------------------ */

‎css_tabs_simple/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Site | Page</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="simple_tabs.css" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
10+
<script src="simple_tabs.js" defer></script>
11+
</head>
12+
13+
<body>
14+
15+
<header>
16+
<h1 class="primary-heading">CSS Tabs</h1>
17+
</header>
18+
19+
<div class="container">
20+
21+
<ul class="simple-tabs__nav">
22+
<li><a class="simple-tabs__btn active" href="#tab-one">Status</a></li>
23+
<li><a class="simple-tabs__btn" href="#tab-two">Details</a></li>
24+
<li><a class="simple-tabs__btn" href="#tab-three">Settings</a></li>
25+
</ul>
26+
27+
<div class="simple-tabs__content">
28+
<div class="simple-tabs__pane active" id="tab-one">
29+
Status content
30+
</div>
31+
<div class="simple-tabs__pane" id="tab-two">
32+
Details content
33+
</div>
34+
<div class="simple-tabs__pane" id="tab-three">
35+
Settings content
36+
</div>
37+
</div>
38+
39+
</div>
40+
41+
42+
43+
</body>
44+
</html>

‎css_tabs_simple/simple_tabs.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.simple-tabs__nav {
2+
list-style: none;
3+
display: flex;
4+
padding: 0;
5+
justify-content: space-around;
6+
}
7+
8+
.simple-tabs__nav li {
9+
display: inline;
10+
}
11+
12+
.simple-tabs__btn {
13+
text-decoration: none;
14+
}
15+
16+
.simple-tabs__btn.active {
17+
border-bottom: solid 1px red;
18+
}
19+
20+
.simple-tabs__pane {
21+
display: none;
22+
}
23+
24+
.simple-tabs__pane.active {
25+
display: block;
26+
}

‎css_tabs_simple/simple_tabs.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
(function() {
2+
function main() {
3+
var tabButtons = Array.from(document.querySelectorAll('.simple-tabs__btn'));
4+
5+
tabButtons.map(function(button) {
6+
button.addEventListener('click', function(e) {
7+
e.preventDefault();
8+
document.querySelector('.simple-tabs__btn.active').classList.remove('active');
9+
button.classList.add('active');
10+
11+
document.querySelector('.simple-tabs__pane.active').classList.remove('active');
12+
document.querySelector(button.getAttribute('href')).classList.add('active');
13+
});
14+
});
15+
}
16+
17+
if (document.readyState !== 'loading') {
18+
main();
19+
} else {
20+
document.addEventListener('DOMContentLoaded', main);
21+
}
22+
})();

0 commit comments

Comments
 (0)