-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
87 lines (69 loc) · 2 KB
/
test.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
<html>
<style>
.menu {
background-color: #f1f1f1;
padding: 8px 0px;
}
.menu span {
display:inline;
text-align: center;
color: #000;
padding: 8px 16px;
}
.menu span:hover {
background-color: #555;
color: white;
}
div.body {
display: none;
}
div.bodyvis {
background-color: #f9f9f9;
padding-left: 8px;
}
</style>
<script>
function selectMenu(name,ind)
{
var menu=document.getElementById(name);
var nChildren=menu.children.length;
for (var iChild=0; iChild<nChildren;++iChild)
{
var menuBody=document.getElementById(name+"." + iChild);
menuBody.className="body";
}
var activeBody=document.getElementById(name+"." + ind);
activeBody.className="bodyvis";
}
</script>
<body>
<span class="menu" id="topmenu">
<span onclick="selectMenu('topmenu',0)">Step 1</span>
<span onclick="selectMenu('topmenu',1)">Step 2</span>
<span onclick="selectMenu('topmenu',2)">Step 3</span>
</span>
<div id="topmenu.0" class="bodyvis">
<h1>Body 1</h1>
<p>laskdfj ;lasdjf ;lkasdjf ;lsakdjf; lskajf; lksjdfl ksajlkweuy4
rois;l kdfj.slkdjf lsakdj f;laskdjf ;lsak</p>
<p>laskdfj ;lasdjf ;lkasdjf ;lsakdjf; lskajf; lksjdfl ksajlkweuy4
rois;l kdfj.slkdjf lsakdj f;laskdjf ;lsak lksdfj noaksdjf aosidu
foasiudf;oisu; ofiusa;oiuf; aoiuf;ozsd lsadhflksdhfkl sdfk lsdkjahf
lksdfh lksajd</p>
</div>
<div id="topmenu.1" class="body">
<h1>Body 2</h1>
<span class="menu" id="submenu2">
<span onclick="selectMenu('submenu2',0)">Step 2.1</span>
<span onclick="selectMenu('submenu2',1)">Step 2.2</span>
<span onclick="selectMenu('submenu2',2)">Step 2.3</span>
</span>
<div id="submenu2.0" class="bodyvis"><h2>Body 2.1</h2></div>
<div id="submenu2.1" class="body"><h2>Body 2.2</h2> </div>
<div id="submenu2.2" class="body"><h2>Body 2.3</h2> </div>
<h1>Body 3</h1>
<h1>Body 4</h1>
</div>
<div id="topmenu.2" class="body"><h1>Body 3</h1></div>
</body>
</html>