使用 javascript 在客户端动态创建面包屑

Question

我想使用 java 脚本在客户端动态创建面包屑。面包屑将是用户导航时遵循的路径： 主页 > 关于我们 > 我们的历史..

锚标记将按照用户导航的顺序在每个页面上生成。

现在我可以使用服务器端技术轻松创建这些面包屑，但我想在客户端的每个页面上动态生成它。现在我不知道具体如何实现。

我心中的一些逻辑是：

1. 在 Java 脚本中使用名称 和值对创建一个对象类型变量，其中名称是当前页面的名称，值是该页面的 url。

2. 现在，在从一个页面导航到另一页面时，使用查询字符串传递此对象变量。

3. 然后在第二页中从查询字符串中获取该对象变量，并从该对象中提取名称和值对，然后使用它创建锚点并将其添加到目标 div（占位符）。

4. 再次，当用户转到另一个页面时，在对象变量的最后添加 所有先前页面的名称和值对以及当前页面的名称和值对，并使用查询字符串将其传递到下一页。

5. 现在在下一页中执行相同操作并创建锚点。

我使用 html5 客户端存储得到的一些类似内容为 ： html :

<ul id="navigation_links">
    <li>Page1</li>
    <li>Page2</li>
    <li>Page3</li>
</ul>

js:

$(document).ready(function(){
    bindEventToNavigation();
});

function bindEventToNavigation(){
    $.each($("#navigation_links > li"), function(index, element){
        $(element).click(function(event){
            breadcrumbStateSaver($(event.currentTarget).html());
            showBreadCrumb();
        });
    });
}


function breadcrumbStateSaver(text){
    //here we'll check if the browser has storage capabilities
    if(typeof(Storage) != "undefined"){
        if(sessionStorage.breadcrumb){
            //this is how you retrieve the breadcrumb from the storage
            var breadcrumb = sessionStorage.breadcrumb;
           sessionStorage.breadcrumb = breadcrumb + " >> "+text;
        } else {
           sessionStorage.breadcrumb = ""+text; 
        }
    }
    //if not you can build in a failover with cookies
}

function showBreadCrumb(){
     $("#breadcrumb").html(sessionStorage.breadcrumb);   
}
<div id="breadcrumb"></div>

但这里不是创建超链接锚点，而是创建简单文本，而我希望面包屑成为锚点并超链接到各自的页面。

我是java脚本新手，不知道如何实现它。如果您对此有更好的逻辑和解决方案，请告诉我。

提前致谢。

Answer 1

当您将项目添加到面包屑时，您并不是将它们添加为链接，您只是添加文本，并且绑定到 li 元素的单击事件将不会传递。最后，您没有提供任何类型的 href 供这些面包屑使用。

尝试这样的方法，将其放在 4 个页面上，其中每个页面上都有这些链接和脚本文件

<div id="breadcrumb"></div>
<ul id="navigation_links">
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li><a href="page4.html">Page 4</a></li>
</ul>

JS

$(document).ready(function(){
    bindEventToNavigation();
    showBreadCrumb(); //Show the breadcrumb when you arrive on the new page
});

function bindEventToNavigation(){
    $.each($("#navigation_links > li > a"), function(index, element){
        $(element).click(function(event){
            breadcrumbStateSaver($(this).attr('href'), $(this).text());
            showBreadCrumb();
        });
    });
}

function breadcrumbStateSaver(link, text) {
    if (typeof (Storage) != "undefined") {
        if (sessionStorage.breadcrumb) {
            var breadcrumb = sessionStorage.breadcrumb;
            sessionStorage.breadcrumb = breadcrumb + " >> <a href='" + link + "'>" + text + "</a>";
        } else {
            sessionStorage.breadcrumb = "<a href='" + link + "'>" + text + "</a>";
        }
    }
}

这只会将链接放在第一个页面之后的页面上。所以你也可以使用

$(document).ready(function () {
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

在每个页面的顶部，并自动将其添加到面包屑中，而不是通过单击执行此操作。如果您需要点击来运行其他功能/事件，您可以使用带有 id 的 span/li/div 标签，您可以将事件绑定到该 id，而不仅仅是使用锚点。

最后，这不会阻止面包屑中出现重复项，因此您可能需要考虑将链接和文本存储在数组中，并从中构建面包屑。