基于当前页面的动态面包屑使用Javascript / jQuery [英] Dynamic breadcrumb based on current page using Javascript/jQuery

问题描述

我在此处查看了这个问题，如果没有，答案看起来不错也必须实际导航。

I've looked at the question here and the answer looked good enough if one doesn't have to actually navigate too.

我需要一个Javascript / jQuery脚本，基于当前页面的URL，可以与该页面的父母创建面包屑：

I need a Javascript/jQuery script that, based on the URL of the current page, can create breadcrumbs with the parents of that page, IE:

 <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>

如果用户根据当前页面导航到级别3，则显示：

If the user navigates to Level 3, based on current page, show:

首页>>测试2 >>等级2 >>等级3

Home >> Test 2 >> Level 2 >> Level 3

该脚本将包含在每个页面中，因此它可以在onload 。

This script will be included in every page, so it works onload.

推荐答案

您可以尝试在页面的文档准备好事件中使用以下代码。

You can try following code in the document ready event of the page.

var url = "level3.html"; <-- following line shows how to get this from url
//location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
var currentItem = $(".items").find("[href$='" + url + "']");
var path = "home";
$(currentItem.parents("li").get().reverse()).each(function () {
    path += "/" + $(this).children("a").text();
});
$(".bredcrumb").html(path);

Demo

如果您想要导航链接的面包屑，请尝试此操作演示

Incase if you want breadcrumb with navigation links try this Demo

这篇关于基于当前页面的动态面包屑使用Javascript / jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！