为文中切换添加历史记录

在页面点击切换时也可以用网页的返回回到切换之前的界面，并且模拟链接分享！

主体：

    <div class="box">
        <div class="left">
            <ul>
            </ul>
        </div>
        <div class="right">
            <div class="content">           
            </div>
        </div>
    </div>

CSS样式：

        *{margin: 0;padding: 0;}
        html,body{
            height: 100%;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 80%;
            height: 80%;
            background-color: #ccc;
            margin: 50px auto;
            position: relative;
        }

        .left{
            height: 100%;
            width: 200px;
            position: absolute; 
            background-color: #ccc;
        }

        .left li{
            text-align: center;
            line-height: 2.5;
        }
        .left li a{
            color: #666;
            text-decoration: none;
            cursor: pointer;
        }
        .right{
            height: 100%;
            padding-left: 200px;
            background-color: #eee;
            overflow: scroll;
        }   

        .right .content{
            padding: 20px;
            color: #666;
        }

JS
思路：
遍历数据中的标题添加到导航栏
点击导航栏标题切换文字内容
向浏览器中通过压栈形式添加历史记录
点击网页返回时，返回上一层文本标题、内容
模拟网页分享时利用正则匹配内容返回title参数
获取参数，改变内容
以上思路要注意当返回到最后一个参数为null。

<!-- 引入数据文件 -->
<script type="text/javascript" src='./data.js'></script>
<script type="text/javascript">
    //data是一个全局变量,所以可以在这里使用
    // console.log(data);

    //将ul中所有的内容通过字符串的形式来进行创建    
    var listring = '';

    //遍历data中的内容 json数据类似的对象
    for(var title in data){
        listring += '<li><a href="javascript:;">' + title + '</a></li>';
    }

    //将拼接好的字符串 以innerHTML的形式添加到ul中，即左侧的导航部分
    document.querySelector('.box > .left > ul').innerHTML = listring;


//获取当前URL中的title参数（模拟分享链接时2）
    var title = getQueryString('title');
    if (title  == null) {
        //没有参数 默认显示第一首个

        //获取第一个a，即导航条的第一个标题
        var firstA = document.querySelector('.box > .left > ul  a');
        //通过第一个a中的文本来确定content中显示的歌词文字
        var text = data[firstA.innerText];
        // console.log(text);
        //设置歌词  
        document.querySelector('.content').innerHTML = text;

    }else{
        // console.log(title);
        //先对title的中文进行编码处理  将URL中的中文编码转化问中文文本
        title = decodeURIComponent(title);
        // console.log(title);
        document.querySelector('.content').innerHTML = data[title];
    }

    //点击a时进行歌词切换
    //获取所有的a
    var aArray = document.querySelectorAll('.box > .left > ul  a');
    //给每一个a添加点击事件
    for (var i = aArray.length - 1; i >= 0; i--) {
        var a =  aArray[i]
        a.addEventListener('click', function () {
            // console.log(this);
            var text = data[this.innerText];
            document.querySelector('.content').innerHTML = text;
            //当点击了一个歌曲名称时，添加一条历史记录到浏览器中
            //1. 判断当前浏览器是否支持历史记录的添加
            if (window.history && history.pushState) {}

                //向历史记录中，通过压栈的方式添加一条历史记录
                // window.history
                //参数1 历史记录状态名称 在点击返回时用于进行判断
                //参数2 在历史记录列表中所显示的名称
                //              （几乎所有的浏览器厂商都不支持这一条，而是使用网页的title）
                //参数3 URL地址的后缀名
                history.pushState(this.innerText, 'title', '?title='+this.innerText);

        });
    }
    //当浏览器中点击了返回键时  所触发的事件
    //popstate 在历史记录的栈结构中，一条历史记录出栈(pop)
    window.addEventListener('popstate', function(event){
        // console.log('出栈');
        var event = event ? event : window.event;
        //获取出栈事件，从事件对象中获取到历史记录的名称
        // console.log(event.state);
        var name = event.state;
        var text = data[name];
        //判断是否获取到了文字
        if (!text) {
            //没有获取到文字  则默认获取第一首歌的文本
            text = data['五环之歌'];
        } 
        document.querySelector('.content').innerHTML = text;

    });

    //第一次在加载歌词时，需要来获取URL结尾所保存的歌词名字
    //获取URL中的参数（模拟分享链接时1）
    function getQueryString(name){
        //创建正则表达式
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        //获取URL地址 window.location
        //通过search获取后面的内容  ?title=咱们屯里的人
        //substr(1) 截取第二位开始的字符串title=咱们屯里的人
        //match 使用正则表达式来获取所匹配的问内容
        var r = window.location.search.substr(1).match(reg);
        // console.log(r);
        if (r != null) {
            // console.log(r);
            return r[2];
        } else {
            return null;
        } 
    }
</script>

用到的data数据

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 />' +
    '仰视仰视偶们屯里的羊'
};