Linking Pages

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

.iframe {
background-color:khaki;
width:1000px;
height:100vh;
position:absolute;
right:0;
top:0;

}

div {
position:absolute;
display:none;
width:100%;
height:100vh;
background-color:navy;
text-align:center;
}

body {
margin:0;
width:100%;
}

a {
display:block;
margin:10px;
}

.a {
margin:10px;
display:inline-block;
}

:target {
display:block;

}

._1 {
color:white;
font-size:100px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

._2 {
color:white;
font-size:100px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

.b {
margin:10px;
display:block;
}


</style>
</head>
<body>


<iframe class='iframe' name='box' frameborder='0'></iframe>

<div id='page1'><span class='_1'>Page 1</span></div>
<div id='page2'><span class='_2'>Page 2</span></div>

<span class='a'>
<a href='#page1' target='box'>Go to page1</a>
<a href='#page2' target='box'>Go to page2</a>
</span>

<span class='b'>
<a href='https://zsndndbaxq8vhlfcswjbiq-on.drv.tw/Linking Html Pages/page 1.html' target='box'>Go to page1/web</a>
<a href='https://zsndndbaxq8vhlfcswjbiq-on.drv.tw/Linking Html Pages/page 2.html' target='box'>Go to page2/web</a>
</span>

</body>
</html>