JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果

JavaScript通过改变location对象的hash属性的应用

前面我们学到了BOM的Location对象，现在来讲一下实际的应用。通过改变hash属性获取不同的数据。

1.列表页面代码：

    <a href="10模拟详情页面.html#0" target="_blank">张三</a>
    <a href="10模拟详情页面.html#1" target="_blank">李四</a>
    <a href="10模拟详情页面.html#2" target="_blank">王五</a>
    <a href="10模拟详情页面.html#3" target="_blank">赵六</a>
    <a href="10模拟详情页面.html#4" target="_blank">卓七</a>

2.详情页面代码：
HTML代码：

    <p>姓名：<span id="name"></span></p>
    <p>年龄：<span id="age"></span></p>

CSS代码：

    span {
        font-weight: 900;
        font-size: 20px;
    }

javascript代码：

    // 模拟后台的数据
    var data = {
        "persons": [{
            "name": "张三",
            "age": 13
        }, {
            "name": "李四",
            "age": 14
        }, {
            "name": "王五",
            "age": 15
        }, {
            "name": "赵六",
            "age": 16
        }, {
            "name": "卓七",
            "age": 17
        }]
    }

    // 获取后台的数据
    var detialData = data.persons;
    var msg = Number(location.hash.slice(1));
    console.log(msg);
    // switch (msg) {
    //     case 0:
    //     console.log(detialData[0])
    //         break;
    //         case 1:
    //     console.log(detialData[1])
    //         break;
    //         case 2:
    //     console.log(detialData[2])
    //         break;
    //         case 3:
    //     console.log(detialData[3])
    //         break;
    //         case 4:
    //     console.log(detialData[4])
    //         break;    
    //     default:
    //         break;
    // }
    var oName = document.getElementById("name");
    var oAge = document.getElementById('age');
    // 逻辑代码
    for (var i = 0; i < detialData.length; i++) {
        if (i == msg) {
            // console.log(detialData[i]);
            oName.innerText = detialData[i].name;
            oAge.innerText = detialData[i].age;
        }
    }
    // for(var i=0;i<detialData.length;i++){
    //     console.log(detialData[i]);
    // }

视频讲解链接：
https://www.bilibili.com/video/BV1Vt4y1y7uq/