测试用导航(为了方便在各个测试页面间进行跳转，只需将此js代码引入每个页面即可) V2.0

效果图片

使用方法：只需将此js代码引入每个页面即可

第三版：将动态设置title也加进来

update161226:将原来的index.html匹配改为只index匹配，这样无论后缀是什么都可以匹配。

/**
 * Created by haley on 2016/12/16.
 * 添加动态设置title功能
 */

window.addEventListener('load', function () {
    (function () {
        var links = [
            {"link": "index", t: "首页"},//link为页面的地址，t为跳转页面的提示文字，数量依据需求添加
            {"link": "about", t: "关于我们"},
            {"link": "businessField", "t": "业务领域"},
            {"link": "advantage", "t": "公司优势"},
            {"link": "caseList", "t": "经典案例"}
        ];
        var len = links.length, arrLis = [], arrHtml = [];
        var ul = document.createElement("ul");//js新建元素
        ul.setAttribute("id", "haleyMenu");//给元素加属性
        for (var i = 0; i < len; i++) {
            arrLis.push('<li><a href="' + links[i].link + '.html' + '"><h5>' + links[i].t + '</h5><h5>' + links[i].link + '</h5></a></li>');
            //lis+='<li><a href="'+links[i].link+'.html'+'"><h5>'+links[i].t+'</h5></a></li>';
        }
        lis = arrLis.join('');
        arrHtml.push('<style>');
        arrHtml.push('ul#haleyMenu{position: fixed;bottom:30px;right:10px;color:#fff;text-align: center;z-index:999999999;}');
        arrHtml.push('ul#haleyMenu li{border-bottom:1px solid #1738bc;list-style: none;}');
        arrHtml.push('ul#haleyMenu li h4{padding-top:10px;margin: 10px 0;color:#005599;border:1px solid #1738bc;height:60px;border-bottom:10px solid #009900;font-size:14px;}');
        arrHtml.push('ul#haleyMenu li a{color:#fff;text-decoration: none;}');
        arrHtml.push('ul#haleyMenu li:hover,.activeHaley{border-bottom:1px solid #fff!important;}');
        arrHtml.push('ul#haleyMenu li h5{text-align:center;padding:5px 8px;margin:0;font-weight: normal;font-family: "微软雅黑", "宋体";}');
        arrHtml.push('</style>');
        arrHtml.push('<li><h4>测试用导航<br>上线时删除</h4></li>');
        arrHtml.push(lis);
        ul.innerHTML = arrHtml.join('');
        document.body.appendChild(ul);//把元素放进body标签里面
        var href = window.location.href;//加当前active
        var arr = href.split('/');
        var arr2 = arr[arr.length - 1];
        var ulNav = document.getElementById('haleyMenu');
        for (var j = 2; j < len + 2; j++) {
            var con = ulNav.childNodes[j].childNodes[0].getAttribute('href');
            if (arr2 == con) {
                ulNav.childNodes[j].setAttribute("class", "activeHaley");
                break;
            }
        }
        //设置每个页面的title内容
        var host = "_XX公司";
        for (var k = 0; k < len; k++) {
            var arrTitle = window.location.href.split('/');
            var arrTitle2 = arrTitle[arrTitle.length - 1];
            if (searchStr(arrTitle2, links[k].link)) {
                $('title').html(links[k].t + host);
                break;
            }
        }
        function searchStr(keywords,str){
            if(str.search(new RegExp(keywords))){
                return 1;
            }
        }
    })(); 
});

 第二版：添加当前页的状态提示

/**
 * Created by 昊商易通 haley on 2016/6/30.
 * readme
 * update:161130
 * 添加当前页面的样式显示状态
 */
window.addEventListener('load',function(){
    (function(){
        var links=[
            {link:"customerManageSee",t:"查看"},//link为页面的地址，t为跳转页面的提示文字，数量依据需求添加
            {link:"customerManageSearch",t:"查询"},
            {link:"customerManageCreate",t:"新建"}
        ];
        var len=links.length;
        var ul = document.createElement("ul");//js新建元素
        ul.setAttribute("id", "haleyMenu");//给元素加属性
        for(var lis="",i=0;i<len;i++){
            lis+='<li><a href="'+links[i].link+'.html'+'"><h5>'+links[i].t+'</h5><h5>'+links[i].link+'</h5></a></li>';
        }
        ul.innerHTML='<style>'
        +'ul#haleyMenu{position: fixed;bottom:30px;right:10px;color:#fff;text-align: center;}'
        +'ul#haleyMenu li{background-color: #005599;border-bottom:1px solid #1738bc;list-style: none;}'
        +'ul#haleyMenu li h4{padding-top:10px;margin: 10px 0;background-color: #fff;color:#005599;border:1px solid #1738bc;height:60px;border-bottom:10px solid #009900;}'
        +'ul#haleyMenu li a{color:#fff;text-decoration: none;}'
        +'ul#haleyMenu li:hover,.activeHaley{background-color:#009900!important;border-bottom:1px solid #fff!important;}'
        +'ul#haleyMenu li h5{text-align:center;padding:5px 8px;margin:0;font-weight: normal;font-family: "微软雅黑", "宋体";}'
        +'</style>'
        +'<li><h4>测试用导航<br>上线时删除</h4></li>'
        +lis;
        document.body.appendChild(ul);//把元素放进body标签里面
        var href = window.location.href;//加当前active
        var arr = href.split('/');
        var arr2 = arr[arr.length - 1];
        var ulNav = document.getElementById('haleyMenu');
        for (var j = 2; j < len + 2; j++) {
            var con = ulNav.childNodes[j].childNodes[0].getAttribute('href');
            if (arr2 == con) {
                ulNav.childNodes[j].setAttribute("class", "activeHaley");
                break;
            }
        }
    })();
});

 第一版：

/**
 * Created by 昊商易通 haley on 2016/6/30.
 */
window.addEventListener('load',function(){
    (function(){
        var links=[
            {link:"index",t:"进入首页"},//link为页面的地址，t为跳转页面的提示文字，数量依据需求添加
            {link:"userCenter",t:"进入用户中心"},
            {link:"question",t:"进入在线问答"},
            {link:"sure",t:"进入确认页"}
        ];
        var len=links.length;
        var ul = document.createElement("ul");//js新建元素
        ul.setAttribute("class", "haleyMenu");//给元素加属性
        for(var lis="",i=0;i<len;i++){
            lis+='<li><a href="'+links[i].link+'.html'+'"><h5>'+links[i].t+'</h5><h5>'+links[i].link+'</h5></a></li>';
        }
        ul.innerHTML='<style>'
        +'ul.haleyMenu{position: fixed;bottom:30px;left:10px;color:#fff;text-align: center;}'
        +'ul.haleyMenu li{background-color: #005599;border-bottom:1px solid #1738bc;list-style: none;}'
        +'ul.haleyMenu li h4{padding-top:10px;margin: 10px 0;background-color: #fff;color:#005599;border:1px solid #1738bc;height:60px;border-bottom:10px solid #009900;}'
        +'ul.haleyMenu li a{color:#fff;text-decoration: none;}'
        +'ul.haleyMenu li:hover{background-color:#009900;border-bottom:1px solid #fff;}'
        +'ul.haleyMenu li h5{text-align:center;padding:5px 8px;margin:0;font-weight: normal;font-family: "微软雅黑", "宋体";}'
        +'</style>'
        +'<li><h4>测试用导航<br>上线时删除</h4></li>'
            +lis;
        document.body.appendChild(ul);//把元素放进body标签里面
    })();
});