面包屑导航栏赋值

最新推荐文章于 2024-09-11 21:09:59 发布

早退的程序员

最新推荐文章于 2024-09-11 21:09:59 发布

阅读量955

点赞数

文章标签： bootstrap 面包屑

本文链接：https://blog.csdn.net/qqnbsp/article/details/80136631

版权

下图是bootstrap的面包屑样式，但是怎么随着标题栏的点击动态赋值呢？

下图是上部标题栏，例如我们点击java->EJB的时候，希望面包屑赋值为 Java/EJB

我们查看标题栏的代码：

发现是一层一层的ul li嵌套，所以用jquery的dom选择，自己写了一个方法：

                        var arry = [];
			obj = $(this);
			while(obj.text() != ""){
				arry.push(obj.text());
				obj = obj.parent().parent().parent().children("a");
			} 
			var str = "";
			for(var i = arry.length-1;i >= 0;i--){
				if(i != 0){ //为最后一个不添加a
					str += "<li><a href='#'>"+arry[i]+"</a> <span class='divider'>></span></li>"
				}else{
					str += "<li class='active'>"+arry[i]+"</li>"
				}
			}
			$("#breadCrumb").html(str);

方法，this代表的被点击的li