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

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/