<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一站式</title>
<style>
*{ margin: 0; padding: 0;}
ul li{ list-style: none; float: left; margin-left: 24px;}
div{ display: none;}
</style>
</head>
<body>
<ul>
<li><a href="javascript:;" data-hash='index'>王云飞</a></li>
<li><a href="javascript:;" data-hash='student'>小四</a></li>
<li><a href="javascript:;" data-hash='message'>同学们听我说</a></li>
</ul>
<br />
<div data-hash='index'>王云飞是一个，做事有恒心有毅力，处事有自己的见解，而不人云己云</div>
<div data-hash='student'>小四是一个，心地善良，为人诚实，一心一意，精明能干，个性稳重，用心主动</div>
<div data-hash='message'>同学们听我说 这是一个 高质量大前端公众号
<img src="https://upload-images.jianshu.io/upload_images/15311104-f9d1c23b2b18ce2d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
</div>
<script>
var aA=document.getElementsByTagName('a');
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function()
{
var hash=this.dataset.hash;
window.location.hash=hash; //添加hash值
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].style.display='none';
if(aDiv[i].dataset.hash==hash)
{
aDiv[i].style.display='block';
}
}
}
}
var firshHash=window.location.hash.substring(1); //默认显示
for(var i=0;i<aDiv.length;i++)
{
if(aDiv[i].dataset.hash==firshHash)
{
aDiv[i].style.display='block';
}
}
window.onhashchange=function() //回车更新地址
{
window.location.reload()
}
</script>
</body>
</html>
同学们听我说
