ifrem框架，动态刷新页面的操作

最新推荐文章于 2022-09-08 10:51:15 发布

原创最新推荐文章于 2022-09-08 10:51:15 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的动态菜单展示方法，并详细解释了如何通过点击菜单项来刷新主页面的内容而不打开新的浏览器窗口。该方案适用于需要动态更新主页面内容的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

菜单相关js动态展示页面：

(function(){

var nav = [{

"name":"职员","list":[{

"name":"首页",

"src" : "index_mr.html",

"fa" : "fa fa-dashboard"

},{

"name":"项目",

"src" : "project.html",

"fa" : "fa fa-laptop"

},{

"name":"任务管理",

"src" : "task.html",

"fa" : "fa fa-edit"

},{

"name":"任务查询",

"src" : "task_search.html",

"fa" : "fa fa-search-plus"

},{

"name":"我的审批",

"src" : "project.html",

"fa" : "fa fa-laptop"

},{

"name":"任务统计",

"src" : "javascript:;",

"fa" : "fa fa-pie-chart"

},{

"name":"成长档案",

"src" : "javascript:;",

"fa" : "fa fa-laptop"

}],

},{

"name":"主管","list":[{

"name":"职责管理",

"src" : "dutySetting.html",

"fa" : "fa fa-files-o"

},{

"name":"职责SOP",

"src" : "javascript:;",

"fa" : "fa fa-files-o"

},{

"name":"业务数据统计",

"src" : "flowdata.html",

"fa" : "fa fa-pie-chart"

}],

},{

"name":"管理","list":[{

"name":"职员KPI考核",

"src" : "javascript:;",

"fa" : "fa fa-check-square-o"

},{

"name":"组织机构岗位",

"src" : "roleManagement.html",

"fa" : "fa fa-users"

},{

"name":"KPI权重设置",

"src" : "roleManagement.html",

"fa" : "fa fa-check-square-o"

},{

"name":"用户管理",

"src" : "staffManagement.html",

"fa" : "fa fa-user"

}],

}];

var aside=$('aside.main-sidebar');

aside.css({'overflow-y':'auto','height':'100%'});

aside.empty();

//菜单展示

navView(nav)

function navView(data){

var str='';

str +='<section class="sidebar">'+

'<ul class="sidebar-menu">'

for(var i=0;i<data.length;i++){

str += '<li class="header"><span>'+data[i].name+'</span></li>'

for(var j=0;j<data[i].list.length;j++){

str += '<li>' +

'<a data-href="'+data[i].list[j].src+'" id="iframename">' +

'<i class="'+data[i].list[j].fa+'"></i> <span>'+data[i].list[j].name+'</span>' +

'<span class="pull-right-container"><small class="label pull-right bg-green"></small></span> ' +

'</a>' +

'</li>'

}

str+='</ul></section>';

$('aside.main-sidebar').append(str);

}

})();

html当前主页面：

</div>

js展示更具点击菜单页面刷新当前主页面且防止在主页面的超链接中，页面弹出新窗口

var height= document.documentElement.clientHeight - 60;

$('.main').find('iframe').css({"height":height+'px'});

$('.sidebar').on('click','#iframename',function(){

var href = $(this).attr("data-href");

$('.main').find('iframe').attr("src",href);

})