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

Question

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

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

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

我脑子里的一些逻辑是:

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

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

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

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

5. 现在在下一页做同样的事情并创建 anchor 。

我得到了一些类似的东西here使用 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>

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

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

提前致谢。

Answer 1

当您将项目添加到面包屑时，您并不是将它们添加为链接，您只是添加文本，您绑定(bind)到 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 标签，您可以将事件绑定(bind)到该 id，而不仅仅是使用 anchor 。

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