使用Javascript/jQuery基于当前页面的动态面包屑

我看了这个问题，如果一个人不需要实际导航的话，答案看起来就足够好了

我需要一个Javascript/jQuery脚本，该脚本基于当前页面的URL，可以使用该页面的父级创建面包屑，即：

 <nav class="items">
 <ul>
 <li><a href="test.html">Test 1</a></li>
 <li><a href="test2.html">Test 2</a>
    <ul>
        <li><a href="level1.html">Level 1</a></li>
        <li><a href="test/level2.html">Level 2</a>
            <ul>
                <li><a href="test/level2/level3.html">Level 3</a></li>
                <li><a href="test/level2/level32.html">Also at level 3</a></li>
            </ul>
      </li>
    </ul>
 </li>
 <li><a href="test3.html">Test 3</a></li>
</ul>
</nav>

如果用户根据当前页面导航到级别3，则显示：

主页>>测试2>>级别2>>级别3

---

此脚本将包含在每个页面中，因此它可以在加载时工作。

如果要在http请求上导航，此代码可能不适合您

如果要通过此菜单导航html页面；您可能会在每个html页面上加载一些代码，以便根据该页面构建面包屑

---

但是，如果要通过ajax导航内容，可以使用以下代码。并将内容加载功能放入单击事件中

您可以在页面的document ready事件中尝试以下代码

var url = "level3.html"; <-- following line shows how to get this from url
//location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
var currentItem = $(".items").find("[href$='" + url + "']");
var path = "home";
$(currentItem.parents("li").get().reverse()).each(function () {
    path += "/" + $(this).children("a").text();
});
$(".bredcrumb").html(path);

---

如果你想要带导航链接的面包屑，试试这个

我想到的javascript会在每次加载时都能工作，不会使用ajax。您是否正在构建html网站或使用任何服务器端编程来传递当前页面的信息以创建面包屑？尝试创建独立的顶级html，该html将包含在具有服务器端编程后端的应用程序和wordpress实例中。这就是为什么我希望它是javascript。我知道可以使用$location.attr'href'；获取当前页面。因此，它将在ul中进行迭代，以找到与我当前查看的url相似的url。如果我没有弄错，请检查此提琴。谢谢，很好的提琴：更近一步，但它无法与手头的文件结构一起工作。太好了，这是非常正确的！我有一个额外的/after Home，但它可能只是我的html，因此我可以解决这个问题。非常感谢。这太棒了。我正在使用这个递归函数处理引导面包屑样式。请检查。这对我有用。