Question

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

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

如果有多个同名页面
当前页面有链接
我想删除第一个，即Home-link

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

这是我从另一篇文章中获取的代码：

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（＆＃34; /＆＃34;）+ 1）; 更改为 location.pathname.substring（location。 pathname.lastIndexOf（＆＃34; /＆＃34;） - 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，此代码从该URL中提取最后一部分，该部分被假定为html页面名称（例如：home.html）。然后currentItem找到具有前面找到的html页面名称的html元素。最后一行做两件事1.获取锚标记的父元素，在其中获取html页面名称，然后追加父元素的子元素名称面包屑。这是因为页面名称和菜单中的外观并不总是相同的例子，您将页面命名为myhmpg.html但在菜单中您可能已将其显示为Home。希望这个解释有所帮助请回复你，看你的问题没有得到正确回答

Answer 2

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

    $(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边框划分了面包屑。

Answer 3

完整的 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();

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

3 个答案:

您要查找的代码是