测试用导航(为了方便在各个测试页面间进行跳转,只需将此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标签里面 })(); });
haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!