html5 实现当前页面跳转(单页面)

最新推荐文章于 2024-06-28 10:17:09 发布

Corner1990

最新推荐文章于 2024-06-28 10:17:09 发布

阅读量7.4k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_33768153/article/details/52523258

版权

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单一页面应用程序</title>
<style>
header{font-size: 20px;color: #646464;}
nav{font-size: 24px;color: #969696;}
section{overflow: hidden;}
.left-box{width: 200px;background: #f2f2f2;float: left;text-indent: 30px;min-height: 800px;padding-top: 20px;}
.left-box a{font-size: 16px;color: #646464;display: block;height: 30px;line-height: 30px;text-decoration: none;}
.left-box a:hover{color: #323232;}
.right-box{margin-left: 200px;}
</style>
</head>
<body>
<header>单一页面应用实现链接跳转</header>
<nav>这里本来因该是导航的，然而并没有</nav>
<section id="wrap">
<article class="left-box" id="list">
<!-- <a href="javascript:;" class="link-itme" data-tite="五环之歌">★五环之歌</a>
<a href="javascript:;" class="link-itme" data-tite="我的滑板鞋">★我的滑板鞋</a>
<a href="javascript:;" class="link-itme" data-tite="咱们屯里人">★咱们屯里人</a> -->
</article>
<article class="right-box">
<p id="content"></p>
</article>
<div class="class1 class2 class=3"></div>

<script>
var data = {
 "五环之歌": '作曲 : 唐诃/吕远 \n <br />' +
   '作词 : 岳云鹏/MC Hotdog \n <br />' +
   '我把车子开上五环 \n <br />' +
   '我把车子开上五环 \n <br />' +
   '快点把车子开上五环 \n <br />' +
   '什么都不管 \n <br />' +
   '我就是要上五环 \n <br />' +
   '啊～～～五环 你比四环多一环（fifth Ring） \n <br />' +
   '啊～～～五环 你比六环少一环（ I\'m driving on the fifth ring）  \n <br />' +
   '终于有一天 你会修到七环 \n <br />' +
   '修到七环怎么办 你比五环多两环 \n <br />' +
   '热狗： \n <br />' +
   '车一直塞 表情痴呆 早就习惯漫无目的一直开 \n <br />' +
   '那五环依然那么自在 \n <br />' +
   '它一直在 \n <br />' +
   '腐烂的喇叭声 苦难的师傅一直唉～ \n <br />' +
   '北京的 style 在上下班 车子一直排 \n <br />' +
   '为了生活 为了梦想 为了放假单 \n <br />' +
   '或许有天 我们必须要去 那八环 \n <br />' +
   'Rest in peace 北京的交通 我为你放花篮 \n <br />' +
   '岳云鹏： \n <br />' +
   '啊～～～五环 你比四环多一环（fifth Ring） \n <br />' +
   '啊～～～五环 你比六环少一环（ I\'m driving on the fifth ring）  \n <br />' +
   '终于有一天 你会修到七环 \n <br />' +
   '修到七环怎么办 你比五环多两环 \n <br />' +
   '热狗： \n <br />' +
   '多少人明知山有虎 却偏向虎山行 \n <br />' +
   '我明明知道五环堵 \n <br />' +
   '这条回家路 祸不单行 \n <br />' +
   '要塞啊！ 就塞啊！哼 ！ 我不担心 \n <br />' +
   '一辈子没有洗过车 我车子不干净 \n <br />' +
   '这烟抽的看起来多淡定 \n <br />' +
   '这边苦苦的笑容呢？吐出了叹气 \n <br />' +
   '你还想看什么戏 \n <br />' +
   '在车上乖乖吃着你的煎饼 \n <br />' +
   '快点上五环 因为或许先上先赢 \n <br />' +
   '我把车子开上五环 \n <br />' +
   '我把车子开上五环 \n <br />' +
   '快点把车子开上五环 \n <br />' +
   '什么都不管 \n <br />' +
   '我就是要上五环 \n <br />' +
   '五环五环 \n <br />' +
   '五环五环 \n <br />' +
   '这是五环五环 \n <br />' +
   '什么都不管 \n <br />' +
   '我现在就上五环',
 "我的滑板鞋": '有些事我都已忘记 \n <br />' +
   '但我现在还记得 \n <br />' +
   '在一个晚上我的母亲问我 \n <br />' +
   '今天怎么不开心 \n <br />' +
   '我说在我的想象中有一双滑板鞋 \n <br />' +
   '与众不同最时尚跳舞肯定棒 \n <br />' +
   '整个城市找遍所有的街都没有 \n <br />' +
   '她说将来会找到的时间会给我答案 \n <br />' +
   '星期天我再次寻找依然没有发现 \n <br />' +
   '一个月后我去了第二个城市 \n <br />' +
   '这里的人们称它为魅力之都 \n <br />' +
   '时间过的很快夜幕就要降临 \n <br />' +
   '我想我必须要离开 \n <br />' +
   '当我正要走时我看到了一家专卖店 \n <br />' +
   '那就是我要的滑板鞋 \n <br />' +
   '我的滑板鞋时尚时尚最时尚 \n <br />' +
   '回家的路上我情不自禁 \n <br />' +
   '摩擦 摩擦 \n <br />' +
   '在这光滑的地上摩擦 \n <br />' +
   '月光下我看到自己的身影有时很远有时很近 \n <br />' +
   '感到一种力量驱使我的脚步 \n <br />' +
   '有了滑板鞋天黑都不怕 \n <br />' +
   '一步两步一步两步 一步一步似爪牙 \n <br />' +
   '似魔鬼的步伐 \n <br />' +
   '摩擦 摩擦 \n <br />' +
   '我给自己打着节拍 \n <br />' +
   '这是我生命中美好的时刻 \n <br />' +
   '我要完成我最喜欢的舞蹈 \n <br />' +
   '在这美丽的月光下在这美丽的街道上 \n <br />' +
   '我告诉自己这是真的这不是梦 \n <br />' +
   '一步两步一步两步 一步一步似爪牙 \n <br />' +
   '似魔鬼的步伐 \n <br />' +
   '摩擦 摩擦 \n <br />' +
   '在这光滑的地上摩擦 \n <br />' +
   '摩擦似魔鬼的步伐 \n <br />' +
   '似魔鬼的步伐 \n <br />' +
   '一步两步一步两步 一步一步似爪牙 \n <br />' +
   '似魔鬼的步伐 \n <br />' +
   '摩擦 摩擦 \n <br />' +
   '在这光滑的地上摩擦 \n <br />' +
   '摩擦',
 "咱们屯里人": '作曲 : 杨柏森 \n <br />' +
   '作词 : 马金萍 \n <br />' +
   '偶滴老嘎 就组在则个屯 \n <br />' +
   '偶系则个屯里 土生土长滴羊 \n <br />' +
   '别看屯子不仔大呀 有山有水有速棱 \n <br />' +
   '邻里先情挺和睦 老少爷们更滑群 \n <br />' +
   '屯子磊面发生过 黑多黑多的事 \n <br />' +
   '回想系那是特别的梗 \n <br />' +
   '朋友们若系有森确呀 我领你仰视仰视 \n <br />' +
   '仰视仰视偶们屯里的羊 \n <br />' +
   '偶滴老嘎 就组在则个屯 \n <br />' +
   '偶系则个屯里 土生土长滴羊 \n <br />' +
   '别看屯子不仔大呀 有山有水有速棱 \n <br />' +
   '邻里先情挺和睦 老少爷们更滑群 \n <br />' +
   '屯子磊面发生过 黑多黑多的事 \n <br />' +
   '回想系那是特别的梗 \n <br />' +
   '朋友们若系有森确呀 我领你仰视仰视 \n <br />' +
   '仰视仰视偶们屯里的羊'
};
</script>
<script>

//获取元素
var listElement= document.querySelector('#list')

//遍历 data对象，动态创建a链接
for(var title in data){
    var aElem=document.createElement('a');
    aElem.innerHTML=title;
    aElem.setAttribute('data-title',title);

    //这里应该时一个文档碎片的 我这里偷懒了，实际开发中像这汇总平凡操作dom的情况必须要优化，必须优化，必须优化，必须优化，重要的时说三遍
    listElement.appendChild(aElem);
}
//拿到所有的a标签， 内容容器
var items = document.querySelectorAll('#list>a');
var content = document.querySelector('#content');

//遍历items，绑定事件点击事件
for(var i=0;i<items.length;i++){
console.log(items[i].innerHTML)
items[i].addEventListener('click',function(){
// 找到触发事件的元素
var title = this.dataset['title'];
//console.log(this.dataset['title'])
//赋值
content.innerHTML=data[title];
//操作历史记录
if(window.history && history.pushState){
// history.pushState //给历史记录添加一条记录
// history.pushState(title) 第一个参数是操作的title,第二个参数表示给历史添加记录的参数 目前没有浏览器支持 第三个参数表示让url改编成那个
history.pushState(title,'title','history.html?t='+decodeURI(title));
}else{
console.log('不支持');
}
},false)
}
// 当我们在伪造的访问历史中前进或后退时会执行一个popstate事件
     window.addEventListener('popstate', function(e) {
       content.innerHTML = data[e.state];
     });
    // 如果说第一次请求过来 获取地址栏中t参数
    // window.location可以拿到当前爱你网页中跟地址相关的信息
    // console.log(window.location.search.split('=')[1])
    var title=window.location.search.split('=')[1];
    if(title){
    //有title
    // console.log(decodeURI(title));
    content.innerHTML = data[decodeURI(title)];
    console.log(decodeURI(title))
    console.log(data)
    }
</script>

</section>
</body>
</html>

这是很久之前写的文章，那个时候水平有限，写的不好，也不会备注，并且也不知道排版这些，最近发现不好，想着改一下，发现还是不能使用markdown，那就这么简单的修改一下了，希望没有在辣到你们的眼睛

Corner1990

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
html5 实现当前页面跳转(单页面)

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;单一页面应用程序&lt;/title&gt;&lt;style&gt;header{font-size: 20px;color: #646464;}na
复制链接

扫一扫

专栏目录