html
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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- the "Navigation" buttons -->
<hr>
<p>Navigation</p>
<button id="firstBtn">First Page</button>
<button id="secondBtn">Second Page</button>
<hr>
<h1>Single HTML Page with multiple "sites"</h1>
<!-- here i sepperate the content or in this case the "pages"
just every page in a extra section -->
<section id="first">
<h2>First page</h2>
<p>Here is the conent of the first page.
<br />Click the buttons so switch to another page.</p>
</section>
<section id="second">
<h2>Second page</h2>
<p>Here you can see the content of the second page.</p>
</section>
</body>
</html>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
align-items: center;
text-align: center;
justify-items: center;
background-color: #222;
color: white;
}
h1 {
color: darkred;
}
h2 {
color: orange;
}
/* just set the height of every section to 100% to fill the whole viewport */
section {
height:100%;
}
js
js
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
// just get the "pages" and buttons
const firstBtn = document.getElementById("firstBtn")
const secBtn = document.getElementById("secondBtn")
const firstpage = document.getElementById("first")
const secondPage = document.getElementById("second")
// Hide secondpage per default
secondPage.hidden = true
firstBtn.setAttribute("disabled", "")
// add function to hide/show pages
firstBtn.addEventListener("click", function(){
secondPage.hidden = true
firstpage.hidden = false
firstBtn.setAttribute("disabled", "")
secBtn.removeAttribute("disabled")
})
secBtn.addEventListener("click", function(){
secondPage.hidden = false
firstpage.hidden = true
secBtn.setAttribute("disabled", "")
firstBtn.removeAttribute("disabled")
})
BROWSER
Console
Run