frame框架
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="80,*">
<frame src="top.html" name="top" />
<frameset cols="150,*">
<frame src="left.html" name = "left"/>
<frame src="right.html" name= "right"/>
</frameset>
</frameset>
</html>
效果图
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
top
<button onclick="jiaohuan()">交换</button>
</body>
<script type="text/javascript">
function jiaohuan(){
parent.left.location.href ="right.html"
parent.right.location.href = "left.html"
}
</script>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
left
<a href="https://www.bilibili.com/" target="right">哔哩哔哩</a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
right
</body>
</html>