基于当前页面的动态面包屑&；使用Javascript/jQuery（）的列表

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

后者几乎就是我要寻找的东西，但有三个问题：

如果存在同名的多个页面，则会失败

当前页面有一个链接

我想删除第一个，即主链接

你能帮我改进一下吗，我是个彻头彻尾的笨蛋

这是我从另一篇文章中得到的代码：

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

var url=“level3.html”；
//location.pathname.substring（location.pathname.lastIndexOf（“/”）+1）；
var currentItem=$（“.items”）.find（“[href$='”+url+“]”）；
$（“.bredcrumb”）.html（$（“”）；
$（currentItem.parents（“li”）.get（）.reverse（））.each（函数（）{
$（“.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）；这似乎有助于解决第一个问题。但我不确定这是否是一个好的解决方案

多谢各位， Tobias

您要查找的代码是

---

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

我终于找到了问题的（肮脏？）答案：

    $(document).ready(function() {  
        var url = location.href; //absolute path instead of file name
        var currentItem = $(\".items\").find(\"[href$='\" + url +  \"']\");
        $(\".bredcrumb\").html($(\"Home\"));        
        $(currentItem.parents(\"li\").get().reverse()).each(function () {
          $(\".bredcrumb\").append( $(this).children(\"a\"));
        });
    });

---

然后，我用css隐藏了最后一个孩子，并使用css边框分割面包屑。

完整的Javascript函数从页面url显示面包屑

  function getBreadcrumbs() {
    const here = location.href.split('/').slice(3);
    // console.log(here)
    const parts = [{"text": 'Home', "link": '/'}];
    // console.log(parts)

    for (let i = 0; i < here.length; i++) {
        const part = here[i];
        // console.log(part)
        const text = decodeURIComponent(part).toUpperCase().split('.')[0];
        // console.log(text)
        const link = '/' + here.slice(0, i + 1).join('/');
        console.log(link)
        parts.push({"text": text, "link": link});
        // console.log(parts)
    }
    return parts.map((part) => {
        return "<a href=\"" + part.link + "\">" + part.text + "</a>"
    }).join('<span style="padding: 5px">/</span>')
}

document.getElementById("demo").innerHTML = getBreadcrumbs();

函数getBreadcrumbs（）{ const here=location.href.split（'/'）.slice（3）； //console.log（此处） const parts=[{“text”：“Home”，“link”：“/”}]； //控制台日志（部分） for（设i=0；i{ 返回“” }).join（“/”） } document.getElementById（“demo”）.innerHTML=getBreadcrumbs（）；

---

非常感谢，这解决了3个问题。问题我现在试图用if/else参数来解决当前页面的问题。第一个问题更复杂，有人有想法吗？@user3064227帮助我解决了第三个问题，但我仍然无法解决其他问题。有人能帮我吗？我在css和第n个最后一个子选择器的帮助下解决了第2个问题。

  function getBreadcrumbs() {
    const here = location.href.split('/').slice(3);
    // console.log(here)
    const parts = [{"text": 'Home', "link": '/'}];
    // console.log(parts)

    for (let i = 0; i < here.length; i++) {
        const part = here[i];
        // console.log(part)
        const text = decodeURIComponent(part).toUpperCase().split('.')[0];
        // console.log(text)
        const link = '/' + here.slice(0, i + 1).join('/');
        console.log(link)
        parts.push({"text": text, "link": link});
        // console.log(parts)
    }
    return parts.map((part) => {
        return "<a href=\"" + part.link + "\">" + part.text + "</a>"
    }).join('<span style="padding: 5px">/</span>')
}

document.getElementById("demo").innerHTML = getBreadcrumbs();