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

Question

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

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

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

如果有多个同名页面则失败
当前页面有一个link
我想删除第一个，即主页-link

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

那是我从另一个 post 那里得到的代码：

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

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

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隐藏了last-child，然后用css边框来划分面包屑。

Answer 3

显示第 url

页面包屑的完整 Javascript 功能

  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();

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

Dynamic breadcrumb based on current page & list using Javascript/jQuery ()

javascript

jquery

breadcrumbs

您要查找的代码是