需求

頁面是使用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("系統管理","使用者列表");