HTML如何简单实现切换页面?
点击图片是一个页面，点击标题是一个页面
并且网页地址始终没有改变，是在一个页面实现的。
因为我尝试用js做，但是做的非常复杂，肯定不是最优解。所以请问该如何简单实现这种效果。
以下是我的代码，献丑了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双页面</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="parent">
<ul>
<li id="tag1" onclick="cur1()"
onmouseover="over_1()"
onmousedown="click_1()"
onmouseleave="leave_1()"><a href="#">图片</a></li>
<li id="tag2" onclick="cur2()"
onmouseover="over_2()"
onmousedown="click_2()"
onmouseleave="leave_2()"><a href="#">标题</a></li>
</ul>
<div id="children">
<img src="typora-img.jpg" alt="图片找不到了" width="400" />
<img src="toc.png" alt="图片找不到了" width="400" />
</div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
/* JavaScript Document */
$('tag1').style.backgroundColor = 'rgb(255, 255, 255)';
$('tag1').style.borderBottomColor = 'rgb(255, 255, 255)';
$('tag2').style.backgroundColor = 'rgb(243, 243, 243)';
$('tag2').style.borderBottomColor = '#ddd';
document.getElementsByTagName("img")[0].style.display = 'block';
document.getElementsByTagName("img")[1].style.display = 'none';
function $(id) {
return document.getElementById(id);
}
// 使用 onmousedown() 导致 css hover 失效
function click_1 () {
$('tag1').style.backgroundColor = 'rgb(255, 255, 255)';
$('tag1').style.borderBottomColor = 'rgb(255, 255, 255)';
$('tag2').style.backgroundColor = 'rgb(243, 243, 243)';
$('tag2').style.borderBottomColor = '#ddd';
document.getElementsByTagName("img")[0].style.display = 'block';
document.getElementsByTagName("img")[1].style.display = 'none';
}
function click_2 () {
$('tag1').style.backgroundColor = 'rgb(243, 243, 243)';
$('tag1').style.borderBottomColor = '#ddd';
$('tag2').style.backgroundColor = 'rgb(255, 255, 255)';
$('tag2').style.borderBottomColor = 'rgb(255, 255, 255)';
document.getElementsByTagName("img")[0].style.display = 'none';
document.getElementsByTagName("img")[1].style.display = 'block';
}
function over_1 () {
if (document.getElementById('tag1').style.backgroundColor === 'rgb(255, 255, 255)') {
$('tag1').style.backgroundColor = 'rgb(255, 255, 255)';
document.getElementsByTagName("a")[0].className = 'cursorDefault';
document.getElementsByTagName("a")[1].className = 'cursorPointer';
} else {
$('tag1').style.backgroundColor = 'rgb(249, 249, 249)';
document.getElementsByTagName("a")[0].className = 'cursorPointer';
document.getElementsByTagName("a")[1].className = 'cursorDefault';
}
}
function over_2 () {
if (document.getElementById('tag2').style.backgroundColor === 'rgb(255, 255, 255)') {
$('tag2').style.backgroundColor = 'rgb(255, 255, 255)';
} else {
$('tag2').style.backgroundColor = 'rgb(249, 249, 249)';
}
}
function leave_1 () {
if (document.getElementById('tag1').style.backgroundColor === 'rgb(255, 255, 255)') {
$('tag1').style.backgroundColor = 'rgb(255, 255, 255)';
} else {
$('tag1').style.backgroundColor = 'rgb(243, 243, 243)';
}
}
function leave_2 () {
if (document.getElementById('tag2').style.backgroundColor === 'rgb(255, 255, 255)') {
$('tag2').style.backgroundColor = 'rgb(255, 255, 255)';
} else {
$('tag2').style.backgroundColor = 'rgb(243, 243, 243)';
}
}
function cur1 () {
document.getElementsByTagName("a")[0].className = 'cursorDefault';
document.getElementsByTagName("a")[1].className = 'cursorPointer';
}
function cur2 () {
document.getElementsByTagName("a")[0].className = 'cursorPointer';
document.getElementsByTagName("a")[1].className = 'cursorDefault';
}
@charset "UTF-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
body {
background-color: rgb(245, 245, 245);
}
#parent {
position: relative;
margin: 50px auto auto;
width: 1000px;
height: 600px;
background-color: rgb(255, 255, 255);
overflow: hidden;
}
ul {
position: absolute;
top: 35px;
left: 80px;
list-style: none;
}
ul li {
display: inline-block;
width: 66px;
height: 44px;
background-color: rgb(243, 243, 243);
border: 1px solid #ddd;
line-height: 44px;
text-align: center;
z-index: 999;
transition: .3s;
}
ul li:hover {
background-color: rgb(249, 249, 249);
}
ul li a {
/*转换成块级元素，扩大a的范围*/
display: block;
color: rgb(102, 102, 102);
text-decoration: none;
}
.cursorDefault {
cursor: default;
}
.cursorPointer {
cursor: pointer;
}
#children {
margin: 80px auto 0 80px;
width: 800px;
height: 450px;
border: 1px solid #ddd;
}
参考下Bootstrap
Navs and tabs · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网 Documentation and examples for how to use Bootstrap’s included navigation components. 
https://v5.bootcss.com/docs/components/navs-tabs/#javascript-behavior
https://v5.bootcss.com/docs/components/navs-tabs/#javascript-behavior如有帮助，采纳支持一下，谢谢。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab-JQ</title>
<style>
* {margin: 0; padding: 0; list-style: none;}
#wrap {width: 600px; margin: 100px auto 0; overflow: hidden;}
#tit {height: 30px;width: 600px;}
#tit span {float: left; height: 30px; line-height: 30px; width: 200px; font-size: 20px; text-align: center; color: #ccc;background: green;}
#con li{display: none; height: 200px; width: 600px; background: pink;font-size: 100px;line-height: 200px;text-align: center;}
#tit span.select {background: red; color: #ccc;}
#con li.show {display: block;}
</style>
<script src='https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js'></script>
</head>
<body>
<div id="wrap">
<div id="tit">
<span class="select">标题1</span>
<span>标题2</span>
<span>标题3</span>
</div>
<ul id="con">
<li class="show">内容111</li>
<li>内容222</li>
<li>内容333</li>
</ul>
</div>
<script>
$('#tit span').click(function() {
var i = $(this).index();//下标第一种写法
//var i = $('tit').index(this);//下标第二种写法
$(this).addClass('select').siblings().removeClass('select');
$('#con li').eq(i).show().siblings().hide();
});
</script>
</body>
</html>
可以用 iframe标签 内联框架实现，详情可以参考文档https://www.w3school.com.cn/tags/tag_iframe.asp