菜单面包屑导航栏

最近在实现一个菜单面包屑导航栏的功能，那么我们如何来实现菜单面包屑导航栏的功能的？下面我们来实现一下

html页面代码：

<div class="nav ">
        <ul class="breadcrumb">
            <li>
                <img src="../../assets/ZhuYeMian/5025_networking.png" />
            li>
            <li><a href="#">首页a> <span class="divider">>>span>li>
            <li class="active" id="DaoHangID">li>
        ul>
div>

JS页面方法绑定：

//动态加载左侧导航栏
$(function(){
			$.post('${ctx}/MainPage/selectModuleDate.do', function (data) {
				if(data.total>-1){
					data=data.rows;
	                for (var i = 0; i < data.length; i++) {
	                     if (data[i].parentNo) {
	                    	 $('#collapseOne').append('
+data[i].moduleid+'" οnclick="choose(this.id)">+data[i]["url"]+'" style="text-decoration:none;margin-left:40px;font-size:15px;line-height:26px;">+data[i]["ico"]+'" style="width:18px;height:18px;"/> '+data[i]["modulemc"]+'
');
	                    } else { 
	                    }
	                 }
	               Initialization();
				}else{
					window.location.href='${ctx}/jsp/Main/login.jsp';
				}
            });
            show_date_time();
		});
//面包屑导航
function ShouYeDaoHang(id){
	  $("#DaoHangID").text(id);
}

效果截图：

这样你就可以实现菜单面包屑导航栏功能了，是不是很简单呢。