简介：
iframe标签详细属于以及功能具体请百度，能找到这篇帖子的估计已经对该标签有所了解了，这里不做重复
主页代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试主页</title>
</head>
<body style="background-color:rgb(255, 140, 140) ;">
<button style="width: 100px; height: 100px; " onclick="frameB.location='./0.html'">按钮1</button>
<button style="width: 100px; height: 100px; " onclick="frameB.location='./1.html'">按钮2</button>
<button style="width: 100px; height: 100px; " onclick="frameB.location='./2.html'">按钮3</button>
<iframe name="frameB" src="./0.html" frameborder="0" style="width: 100%; height: 600px;"></iframe>
</body>
</html>原理：
当按钮被单击时候触发名字为frameB的这个iframe标签，这个标签一开始加载的是0.html，单击按钮2的时候切换加载1.html
第一页代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页1</title>
</head>
<body>
<div style="width:100%;
height: 500px;
background-color: rgb(70, 98, 255);">测试页1
</div>
</body>
</html>第二页代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页2</title>
</head>
<body>
<div style="width:100%;
height: 500px;
background-color: rgb(255, 255, 255);">测试页2
</div>
</body>
</html>第三页代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页3</title>
</head>
<body>
<div style="width:100%;
height: 500px;
background-color: rgb(0, 0, 255);">测试页3
</div>
</body>
</html>