javascript - 使用 Javascript/jQuery 基于当前页面和列表的动态面包屑 ()

Question

找到了这两种实现面包屑的方法:

• jquery - dynamic breadcrumb
• Dynamic breadcrumb based on current page using Javascript/jQuery

后一个几乎是我正在寻找的东西，但存在三个问题:

1. 如果存在多个同名页面则失败
2. 当前页面有一个链接
3. 我想删除第一个，即主页链接

你能帮我改进一下吗，我是个菜鸟......？

这是我从其他帖子中获取的代码:

var url = "level3.html";
//location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
var currentItem = $(".items").find("[href$='" + url + "']");
$(".bredcrumb").html($("<a href='/'>Home</a>"));
$(currentItem.parents("li").get().reverse()).each(function () {
    $(".bredcrumb").append("/").append( $(this).children("a"));
});

列表:

<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>
<div class="bredcrumb"></div>

我将location.pathname.substring(location.pathname.lastIndexOf("/") + 1);更改为location.pathname.substring(location.pathname.lastIndexOf("/") - 3); 这似乎对第一个问题有帮助。但我不确定这是否是一个好的解决方案。

非常感谢，托比亚斯

Answer 1

您要查找的代码是

var url = "level3.html";
//location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
var currentItem = $(".items").find("[href$='" + url + "']");
$(".bredcrumb").html($("Home"));
$(currentItem.parents("li").get().reverse()).each(function () {
    $(".bredcrumb").append("/").append( $(this).children("a"));
});

<小时/>

这将删除当前页面链接。如果我们稍微理解一下代码url 捕获页面的 url，此代码从中提取最后一部分，假定为 html 页面名称(例如:home.html)。然后 currentItem 查找具有之前找到的 html 页面名称的 html 元素。最后一行做了两件事 1. 获取 anchor 标记的父元素，在其中获取 html 页面名称，然后将父元素的子名称附加到面包屑。之所以如此，是因为页面名称和菜单中的外观并不总是相同，例如您将页面命名为 myhmpg.html，但在菜单中您可能将其显示为主页。希望这个解释有帮助。如果您发现您的问题没有得到正确回答，请发表评论