左侧为父页面导航,右侧为iframe显示内容。
需求是点击运行状态中的图标页面可以跳转到对应的监控页面。
这里如果直接写 a 标签 通过链接跳转,右侧的导航栏的选中状态是没有跟着改变的,所以这里需要进行iframe子页面与父页面的通信
<a onclick="click_go('observe_1.html')" href="javascript:;" >一号设备<br/>运行</a>
<script>
$(function (){app.index();});
function click_go(href){
$(window.parent.document).find('#admin-offcanvas .active').removeClass('active');//去除选中状态
$(window.parent.document).find('#collapse-nav').collapse('open');//展开下拉菜单
$(window.parent.document).find('#admin-offcanvas a[href="'+ href +'"]').parent().addClass('active');//设置选中状态
location.href=href;//进行页面跳转
}
</script>
其中,在iframe中,使用jQuery通过 window.parent.document 可以获得父页面的dom,并可以相关操作。
通过绑定点击事件,完成父页面的dom操作后,再进行页面跳转即可到达所需效果。