<style>
* {
margin: 0;
padding: 0;
}
ul li {
float: left;
margin-left: 40px;
}
div {
display: none;
}
</style>
<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">留言的内容</div>
<script>
window.onload = function () {
var ali = document.getElementsByTagName("a")
var dli = document.getElementsByTagName("div")
for (let i = 0; i < ali.length; i++) {
ali[i].onclick = function () {
// console.log(this.getAttribute("data-hash"))
// console.log(this.dataset.hash)
for (let j = 0; j < dli.length; j++) {
dli[j].style.display = 'none'
if (dli[j].dataset.hash == this.dataset.hash) {
dli[j].style.display = 'block'
}
}
window.location.hash = this.dataset.hash
}
}
//第一次进去就可以定位到hash值对应的内容
var firstHash = window.location.hash.substring(1) || 'index'
for(var i = 0;i<dli.length;i++){
if(firstHash == dli[i].dataset.hash){
dli[i].style.display = 'block'
}
}
//页面刷新========因为hash只能在点击页面刷新的时候才能刷新,onhashchange就是在hash发生变化时就让页面刷新,这样我们就可以直接按回车键就可以刷新了
window.onhashchange = function () {
window.location.reload()
}
}
</script>
写网站的一些技巧(一站式开发的原理)
最新推荐文章于 2021-04-15 16:33:01 发布