-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
117 lines (99 loc) · 3.64 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
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hi, welcome to my css paint party.(Only Chrome)</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="nav">
<dl>
<dt>Sun house</dt>
<dd><a id='sun-house-1' href='javascript:void(0);'
onclick="changeHash('sun-house/sun-house-1.html')">sun-house-1.html</a></dd>
<dd><a id='sun-house-2' href='javascript:void(0);'
onclick="changeHash('sun-house/sun-house-2.html')">sun-house-2.html</a></dd>
<dd><a id='sun-house-3' href='javascript:void(0);'
onclick="changeHash('sun-house/sun-house-3.html')">sun-house-3.html</a></dd>
<dd><a id='sun-house-4' href='javascript:void(0);'
onclick="changeHash('sun-house/sun-house-4.html')">sun-house-4.html</a></dd>
<dd><a id='sun-house-5' href='javascript:void(0);'
onclick="changeHash('sun-house/sun-house-5.html')">sun-house-5.html</a></dd>
<dd><a id='sun-house-6' href='javascript:void(0);'
onclick="changeHash('sun-house/sun-house-6.html')">sun-house-6.html</a></dd>
</dl>
<dl>
<dt>Stories</dt>
<dd><a id='car-story' href='javascript:void(0);' onclick="changeHash('car-story/car-story.html')">Car Story</a>
</dd>
</dl>
<dl>
<dt>Logo</dt>
<dd><a id='apple' href='javascript:void(0);' onclick="changeHash('logo/apple.html')">Apple</a></dd>
</dl>
<dl>
<dt>Icons</dt>
<dd><a id='dida-loading' href='javascript:void(0);' onclick="changeHash('icons/dida-loading.html')">Di-da
Loading</a></dd>
<dd><a id='ball-wave' href='javascript:void(0);' onclick="changeHash('icons/ball-wave.html')">Ball Wave</a></dd>
</dl>
<dl>
<dt>Components</dt>
<dd><a id='clock' href='javascript:void(0);' onclick="changeHash('components/clock.html')">Clock</a></dd>
</dl>
<dl>
<dt>Doraemon</dt>
<dd><a id='doraemon-1' href='javascript:void(0);' onclick="changeHash('carton/doraemon-1.html')">doraemon</a>
</dd>
</dl>
<dl>
<dt>Hello Kitty</dt>
<dd><a id='hello-kitty' href='javascript:void(0);'
onclick="changeHash('carton/hello-kitty.html')">hello-kitty</a></dd>
</dl>
<dl>
<dt>Mucis</dt>
<dd><a id='audio' href='javascript:void(0);' onclick="changeHash('music/audio.html')">Audio</a></dd>
</dl>
<dl>
<dt>Robot</dt>
<dd><a id='shake' href='javascript:void(0);' onclick="changeHash('robot/shake.html')">Shake</a></dd>
</dl>
<dl>
<dt>Kids</dt>
<dd><a id='speakingKid' href='javascript:void(0);' onclick="changeHash('kids/speaking-kid.html')">Speaking
Kid</a></dd>
</dl>
</div>
<!-- <div class="content">
<iframe id="frameContent" src="" frameborder="0" width="125%" height="125%" scrolling="no" class="frame">
</iframe>
</div> -->
</div>
<script>
window.onload = function () {
var defaultPage = 'carton/doraemon-1.html';
var search = location.search;
var url = search ? search.replace(/\?page=/i, '') : defaultPage;
// changeContent(url)
}
function changeHash(url) {
location.href = `${location.origin}${location.pathname}?page=${url}`;
changeContent(url);
}
function changeContent(url) {
location.href = `pages/${url}`;
// var frame = document.getElementById('frameContent');
// var links = document.getElementsByClassName('active');
// var targetId = url.match(/\/([^/]+)\.html/)[1];
// var link = document.getElementById(targetId);
// frame.src = `pages/${url}`;
// console.log('src', url);
// Array.prototype.forEach.call(links, link => { link.className = ''; });
// link.className = 'active';
}
</script>
<script type="text/javascript" src="js/analysis.js"></script>
</body>
</html>