目前先到这,再写下去都是一些熟悉的东西。
<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>