JavaScript模拟列表跳转详情页面效果

简介: JavaScript模拟列表跳转详情页面效果上一篇文章我们讲到如何利用JavaScript中location对象的hash值的改变来实现商品列表跳转到详情页面的效果。然后有同学问我,说淘宝的是利用的"?id=****"效果实现的,现在我们来讲一下如何利用location的 search实现效果。如图:1.列表页面HTML代码: <a href="01模拟详情页面.html?id=0" target="_blank"><img src="../0603/img/1.jpg" alt=""></a> <a href="01模拟详情页面.html?id=1" target=

JavaScript模拟列表跳转详情页面效果




上一篇文章我们讲到如何利用JavaScript中location对象的hash值的改变来实现商品列表跳转到详情页面的效果。然后有同学问我,说淘宝的是利用的"?id=****"效果实现的,现在我们来讲一下如何利用location的 search实现效果。如图:


1.列表页面HTML代码:



 

<ahref="01模拟详情页面.html?id=0"target="_blank"><imgsrc="../0603/img/1.jpg"alt=""></a><ahref="01模拟详情页面.html?id=1"target="_blank"><imgsrc="../0603/img/2.jpg"alt=""></a><ahref="01模拟详情页面.html?id=2"target="_blank"><imgsrc="../0603/img/3.jpg"alt=""></a><ahref="01模拟详情页面.html?id=3"target="_blank"><imgsrc="../0603/img/4.jpg"alt=""></a><ahref="01模拟详情页面.html?id=4"target="_blank"><imgsrc="../0603/img/5.jpg"alt=""></a>


2.详情页面HTML代码:


 

<h1>详情页面</h1><p>姓名:<spanid="name"></span></p><p>年龄:<spanid="age"></span></p><div><imgid="pic"src=""></div>


CSS代码:



span {
        font-weight: 900;
        font-size: 20px;
    }
    img {
        width: 600px;
        height: 400px;
    }


JavaScript代码:


 

var data = {
        "persons": [{
            "name": "张三",
            "age": 13,
            "imgSrc": "../0603/img/1.jpg"
        }, {
            "name": "李四",
            "age": 14,
            "imgSrc": "../0603/img/2.jpg"
        }, {
            "name": "王五",
            "age": 15,
            "imgSrc": "../0603/img/3.jpg"
        }, {
            "name": "赵六",
            "age": 16,
            "imgSrc": "../0603/img/4.jpg"
        }, {
            "name": "卓七",
            "age": 17,
            "imgSrc": "../0603/img/5.jpg"
        }]
    }
    var detialData = data.persons;
    // var msg=Number(location.hash.slice(1));//#0
    var msg = Number(location.search.slice(4)); //?id=0
    console.log(msg);
    var oName = document.getElementById("name");
    var oAge = document.getElementById('age');
    var oPic = document.getElementById("pic");
    oName.innerText = detialData[msg].name;
    oAge.innerText = detialData[msg].age;
    oPic.src = detialData[msg].imgSrc;



总结: 这个小的demo只是简单是模拟一下效果,真正工作的时候我们一般列表页面会使用Javascript实现跳转功能。因为不能确定有多少件商品,不可能每件都添加href属性。商品列表也是通过for循环遍历加载的。


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


相关文章
|
3月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
47 5
|
19天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
13 2
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
56 2
前端JS读取文件内容并展示到页面上
|
23天前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
31 4
|
23天前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
38 2
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
18 5
|
2月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
29 1
|
22天前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
41 0
|
24天前
|
JavaScript 前端开发 安全
JavaScript实现跳转的方法
JavaScript实现跳转的方法
15 0
|
24天前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
30 0