历史列表 - 简书

历史列表

哎呀，好长时间不见了，小伙伴们，这次给大家带来一个历史列表的讲解，希望大家喜欢哈！
1、所谓历史列表就是产生在点击元素时产生历史记录，通过浏览器的回退和前进键可以回到上一层或下一层的位置，知道其含义之后就让我带你们去看看具体实现的过程吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 60px;
            background-color: purple;
            font-size: 26px;
            line-height: 60px;
            text-align: center;
            font-weight: bolder;
            float: left;
            margin: 0 50px;
        }
        div:hover{
            cursor: pointer;
        }
        p{  
            width: 200px;
            border: 2px solid #cee;
            clear: both;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <div>水果</div>
    <div>蔬菜</div>
    <div>花种</div>
    <div>娱乐</div>
    <p>香蕉 苹果 西瓜</p>
    <p>西红柿 芹菜 土豆</p>
    <p>玫瑰花 紫罗兰 喇叭花</p>
    <p>拳击 游戏 电影</p>
//以上代码就是一个简单的布局，复制完我的代码，就可以看到效果图了。
    <script>
js代码：
//先获取所有的div和p标签
        var aDiv = Array.from(document.querySelectorAll("div"));
        var aP = Array.from(document.querySelectorAll("p"));
       unit();
function unit(){
//首先我们让第一个p里面的内容显示出来
aP[0].style.display = "block";
//onpopstate 这个是window的一个属性，表示一旦有历史记录产生它就会收到这个事件
window.onpopstate = PopStateHandler;
//遍历所有的div，绑定点击事件
aDiv.forEach(item=>{
item.addEventListener("click",clickHandler);
})
}
function clickHandler(e){
var index = aDiv.indexOf(e.target);
//history.pushState 向当前浏览器会话的历史堆栈中添加一个状态
//有三个参数，（state、title，url）具体请产看mdn
history.pushState({index:index},"","#" + this.innerHTML);
切换menu的一个功能函数
changeMenu(index);
}
function PopStateHandler(e){
changeMenu(history.state.index);
//将history.state保存的index作为参数传入changeMenu()中
}
function chnageMenu(index){
//遍历p，将当前索引值对应的p显示出来
for(var i = 0;i < aP.length;i++){
if(i === index){
aP[i].style.display = "block";
}else{
aP[i].style.display = "none";
}
}
}
    </script>
</body>
</html>

最后编辑于：2020.11.08 21:34:54