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

Question

我已经查看了问题 here如果不需要实际导航的话，答案看起来已经足够好了。

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

 <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

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

Answer 1

您可以在页面的文档就绪事件中尝试以下代码。

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);

Demo

如果您想要带有导航链接的面包屑，请尝试此 Demo