-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (93 loc) · 3.53 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEB-Practices</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
body {
margin: 0;
}
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
height: 45px;
background-color: #666;
padding-left: 25px;
min-width: 470px;
}
#navbar li {
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#navbar li a {
display: block;
padding: 5px;
width: 100px;
color: #fff;
text-decoration: none;
text-align: center;
}
#navbar li:hover {
background-color: #f90;
}
.active {
background-color: #444;
/* border: #000 1px solid;*/
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
iframe {
box-sizing: border-box;
width: 100%;
/* border: #004 4px solid; */
height: -webkit-calc(100vh - 45px);
height: calc(100vh - 45px);
</style>
</head>
<body>
<ul id="navbar">
<li class="active" onclick="handleClickItem(event)"><a href="1) HTML. Tables/index.html">HTML. Tables</a></li>
<li onclick="handleClickItem(event)"><a href="2) CSS. Styles/PageExample.html">CSS. Styles</a></li>
<li onclick="handleClickItem(event)"><a href="3) CSS. Responsive/PageExample.html">CSS. Responsive</a></li>
<li onclick="handleClickItem(event)"><a href="4) Bootstrap/PageExample.html">Bootstrap</a></li>
<li onclick="handleClickItem(event)"><a href="5) Javascript/PageExample.html">Javascript</a></li>
<li onclick="handleClickItem(event)"><a href="6) Ajax and JQuery/index.html">Ajax and JQuery</a></li>
</ul>
<iframe id="frame" src="1) HTML. Tables/index.html" align="left">
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
<script type="text/javascript">
let iframe = document.getElementById("frame");
iframe.src = "1) HTML. Tables/index.html";
let navbar = document.getElementById("navbar");
let items = navbar.getElementsByTagName("li");
function handleClickItem(e) {
e.preventDefault();
if (e.currentTarget.classList.contains('active')) {
return false;
}
if ((e.currentTarget == items[0]))
iframe.src = "1) HTML. Tables/index.html";
else if (e.currentTarget == items[1])
iframe.src = "2) CSS. Styles/PageExample.html";
else if (e.currentTarget == items[2])
iframe.src = "3) CSS. Responsive/PageExample.html";
else if (e.currentTarget == items[3])
iframe.src = "4) Bootstrap/PageExample.html";
else if (e.currentTarget == items[4])
iframe.src = "5) Javascript/PageExample.html";
else if (e.currentTarget == items[5])
iframe.src = "6) Ajax and JQuery/index.html";
for (let i = 0; i < items.length; i++) {
if (e.currentTarget == items[i]) {
items[i].classList.add('active');
} else items[i].classList.remove('active');
}
}
</script>
</body>
</html>