Bootstrap面包屑导航，right.html操作top.html

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fengsheng5210/article/details/82866766

需求

页面是使用frameSet布局的，当点击左侧的菜单后，右侧的页面发生改变，同时顶部的面包屑导航也发生改变。

效果如下

实现

第一步：封装JS方法，right.html页面需要引入这段js代码

/**
 * 面包屑导航
 * @param level1
 * @param level2
 */
function breadCrumbTitle(level1,level2){
   //查找top.html中#Bread元素
    var breadcrumb=$(window.parent.frames["topFrame"].document).find("#Bread");
    var breadCon='<ol class="breadcrumb" style="line-height: 40px;font-size:14px;"><li style="color:#337ab7;">';
        breadCon+='<span class="glyphicon glyphicon-home" aria-hidden="true"></span>';
        breadCon+='&nbsp;主页</li><li style="color:#337ab7;">'+level1+'</li>';
        breadCon+='<li class="active">'+level2+'</li></ol>';
        $(breadcrumb).empty();
        $(breadcrumb).append(breadCon);
 }

第二步：在top.html中要有#Bread,因为面包屑就放置在此DIV里面

<div id="Bread"></div>

第三步：right.html页面调用我们封装的JS方法

breadCrumbTitle("系统管理","用户列表");