写网站的一些技巧（一站式开发的原理）

    <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>