<!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,那就这么简单的修改一下了,希望没有在辣到你们的眼睛