点击图片是一个页面，点击标题是一个页面
并且网页地址始终没有改变，是在一个页面实现的。
因为我尝试用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;
}
