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，则根据当前页面显示：

主页＆gt;＆gt;测试2＆gt; 2级＆gt;＆gt; 3级

此脚本将包含在每个页面中，因此它可以在onload上运行。

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导航内容，则可以使用此代码。并将您的内容加载功能放在click事件中。

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

2 个答案: