jquery面包导航

面包导航一搜网上很多 但是能使用的真的很少，就拿我现在做的一个简单四级导航菜单

于是我就用jquery写了经过不断的调试 使用各种方法 才基本搞定，

做面包导航要求页面与导航必须不在一个页面即 多个iframe中

不能用master 如果用master会重新加载 去掉js动态增加的导航

先定义个div 给一个ID值用来获取

我定义为

<div id="titleInfo"></div>

//获取div       window.parent 可以穿过iframe框架获取父节点内容 如果想获取js父方法可以baidu

   var ss = $(window.parent.document).find('#titleInfo').find("#daohang1");
        if (ss.length < 1) {  //判断是否有此导航  没有增加  有的话不增加
            $(window.parent.document).find('#titleInfo').append("<a  id='daohang1'  target='main'  href='url1'>>><span>企业管理</span></a>");
        }

然后使用jquery 的append()方法增加子节点内容 包含一个连接<A> 

跳转第二个页面导航增加 动态增加URL

  var compId = $(this).parents('tr').find('input[type="checkbox"]').val(); //获取ID
            location.href = "ProductType.aspx?id=" + compId; //location.href实现客户端页面的跳转   跳转注意跳转目标位  ”main”  是IFRAME框架的id或name
            $(window.parent.document).find('#titleInfo').append("<a  id='daohang2'  target='main'  href='/ProductType.aspx?id=" + compId + "'>>><span>产品类型</span></a>");

点击前面的导航要回去 所以要在总页面触发链接导航的onclick事件  并且要去除子项 通过ID得到子项并删除

    $(window.parent.document).find('#titleInfo').find('#daohang1').click(function (e) {
            $(window.parent.document).find('#titleInfo').find('#daohang4').remove();
            $(window.parent.document).find('#titleInfo').find('#daohang3').remove();
            $(window.parent.document).find('#titleInfo').find('#daohang2').remove();
        });