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="_b

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]);
    // }


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

相关文章
|
23小时前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
23小时前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
2天前
|
JavaScript 前端开发
js用Date对象处理时间
以上就是JavaScript中Date对象处理时间的一些基本方法。
6 0
|
2天前
|
缓存 JavaScript C++
浅谈Vue.js的计算属性computed
浅谈Vue.js的计算属性computed
8 0
|
2天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
2天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
9 2
|
17小时前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
2天前
|
XML Web App开发 前端开发
字节FE:JavaScript学习路线图
字节FE:JavaScript学习路线图
10 0
|
2天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
2天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
15 1