使用 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

Answer 2

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

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

但是，如果您要通过 ajax 导航内容，则可以使用此代码。并将您的内容加载功能放在点击事件中。