-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
130 lines (118 loc) · 3.83 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>User Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:400,700" rel="stylesheet">
<style>
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#flyte-frame-nav {
display: flex;
width: 100%;
}
#flyte-frame-tabs {
display: flex;
width: 100%;
justify-content: center;
margin-block: 0;
padding-inline-start: 0;
}
#flyte-frame-tabs li {
cursor: pointer;
padding: 8px;
margin: 0;
margin-right: 12px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
font-style: normal;
font-family: Open Sans, helvetica, arial, sans-serif;
color: #666666;
width: 126px;
text-align: center;
}
#flyte-frame-tabs li:last-child {
margin-right: 0;
}
#flyte-frame-tabs li.active {
border-bottom: 4px solid rgb(163, 26, 255);
color: #333333;
}
#flyte-frame-container {
width: 100%;
}
#flyte-frame-container > div {
display: none;
}
#flyte-frame-container > div.active {
display: block;
padding: 2rem 4rem;
}
</style>
</head>
<body>
<nav id="flyte-frame-nav">
<ul id="flyte-frame-tabs">
<li onclick="handleLinkClick(this)">FlyteDeck Tab1</li>
<li onclick="handleLinkClick(this)">FlyteDeck Tab2</li>
<li onclick="handleLinkClick(this)">FlyteDeck Tab3</li>
<li onclick="handleLinkClick(this)">FlyteDeck Tab4</li>
</ul>
</nav>
<div id="flyte-frame-container">
<div><h1>Hey Deck1, how are you doing?</h1></div>
<div><h1>Hey Deck2, how are you doing?</h1></div>
<div><h1>Hey Deck3, how are you doing?</h1></div>
<div><h1>Hey Deck4, how are you doing?</h1></div>
</div>
</body>
<script>
const setTabs = index => {
const container = document.getElementById('flyte-frame-tabs')
for (let i = 0; i < container.children.length; i++) {
const tabIndex = container.children[i].getAttribute('link_index')
if (tabIndex === index) {
container.children[i].classList.add('active')
} else {
container.children[i].className = ''
}
}
}
const setContent = index => {
const container = document.getElementById('flyte-frame-container')
for (let i = 0; i < container.children.length; i++) {
const tabIndex = container.children[i].getAttribute('link_index')
if (tabIndex === index) {
container.children[i].classList.add('active')
} else {
container.children[i].className = ''
}
}
}
const setLinkIndex = index => {
setTabs(index)
setContent(index)
}
const handleLinkClick = e => {
const linkIndex = e.getAttribute('link_index');
setLinkIndex(linkIndex)
}
const tabs = document.getElementById('flyte-frame-tabs');
const containers = document.getElementById('flyte-frame-container');
for(var i = 0; i < tabs.children.length; i++) {
if (i === 0) {
tabs.children[i].classList.add('active')
containers.children[i].classList.add('active')
}
tabs.children[i].setAttribute("link_index", i+1)
containers.children[i].setAttribute("link_index", i+1)
}
</script>
</html>