JavaScript通过改变location对象的hash属性的应用
前面我们学到了BOM的Location对象,现在来讲一下实际的应用。通过改变hash属性获取不同的数据。
1.列表页面代码:
<ahref="10模拟详情页面.html#0"target="_blank">张三</a><ahref="10模拟详情页面.html#1"target="_blank">李四</a><ahref="10模拟详情页面.html#2"target="_blank">王五</a><ahref="10模拟详情页面.html#3"target="_blank">赵六</a><ahref="10模拟详情页面.html#4"target="_blank">卓七</a>
2.详情页面代码:
HTML代码:
<p>姓名:<spanid="name"></span></p><p>年龄:<spanid="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(vari=0;i<detialData.length;i++){ // console.log(detialData[i]); // }