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

本文介绍了一种使用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 class="content-wrapper main">

<iframe name="iframename" src="index_mr.html" id="iframename" frameborder="0" width="100%" scrolling="auto"></iframe>

</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);

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值