目前先到这，再写下去都是一些熟悉的东西。

<style>
.all{height:100%;display:flex;flex-direction:column;justify-content:space-between;}
.title{display:flex;justify-content:center;}
.bottom{display:flex;justify-content:space-around;}
</style>
<div class=all>
	<div class=top>
		<div class=title></div>
		<div class=body></div>
	</div>
	<div class=bottom>
		<span class=index>index</span>
		<span class=my>my</span>
		<span class=setting>setting</span>
	</div>
</div>
<script src=jq.js></script>
<script>
const domain=location.pathname	
$(window).on('load',function(){
	$('.body').html(window[location.href.split('#')[1]])
})	
$(window).on('popstate',function(){
	$('.body').html(window[location.href.split('#')[1]])
	console.log(location.href.split('#')[1])
})	
$('.index').click(function(){
	index="<div class=index_my>go to my</div><div class=index_setting>go to setting</div>"
	history.pushState('','',domain+'#index');
	$('.title').html($(this).html())
	$('.body').html(index)
	$('.index_my').click(function(){
		my='i am my page'
		history.pushState('','',domain+'#my');
		$('.body').html(my)
	})
	$('.index_setting').click(function(){
		$('.body').html('i am setting page')
	})
})
</script>