前面我们学到了BOM的Location对象,现在来讲一下实际的应用。通过改变hash属性获取不同的数据。 1.列表页面代码: 2.详情页面代码: CSS代码: javascript代码: 视频讲解链接:
JavaScript通过改变location对象的hash属性的应用
<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>
HTML代码: <p>姓名:<span id="name"></span></p> <p>年龄:<span id="age"></span></p> span { font-weight: 900; font-size: 20px; } // 模拟后台的数据 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/
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)