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

Question

发现了以下两种实现面包屑的方法：

• jQuery-动态面包屑
• 使用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）; 这似乎有助于解决第一个问题。 但是我不确定这是否是一个好的解决方案。

非常感谢Tobias

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页面名称的位置获取anchor标签的父元素，然后在其中附加父元素的子名称。面包屑。 之所以这样，是因为页面名称和菜单的外观并不总是相同的，例如，您将该页面命名为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边框来划分面包屑。