5

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

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

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

我心中的一些逻辑是：

  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脚本的新手，不知道如何实现。如果您对此有任何更好的逻辑和解决方案，请告诉我。

提前致谢。

4

2 回答 2

2

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

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

于 2013-11-12T22:46:23.663 回答
1

就像@Luke所说，您没有添加任何链接供面包屑导航。您必须像这样存储文本和链接：

function breadcrumbStateSaver(link, text) {
if (typeof (Storage) != "undefined") {
    if (sessionStorage.breadcrumb) {
        sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
        sessionStorage.locations = sessionStorage.locations + ";" + link; //use any delim you prefer
    }
    else {
        sessionStorage.breadcrumb = text;
        sessionStorage.locations = link;
    }
}

您可以将文本和链接都添加到一个存储变量中，然后用分隔符将其拆分以提取它！

而不是在点击时捕获链接，您实际上可以在页面加载时获取链接document.location.href，并且文本可以取自document.title或将在 server.xml 中设置的某些属性。所以在 document.ready

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

要更新 a 中的面包屑<ul>：

function showBreadCrumb(){
    let crumbs = sessionStorage.breadcrumb.split(";");
    let links = sessionStorage.locations.split(";");
    for(let index in crumbs)
        $("#navigation_links").append($("<li><a href="+links[index]+">"+ crumbs[index] +"</a></li>"));
}

这样，每次用户浏览您的网站时，它都会记录下来。如果您希望用户通过面包屑导航，通过单击面包屑返回他们所在的页面，将上面的代码更改为以下内容：

function showBreadCrumb(){
    let crumbs = sessionStorage.breadcrumb.split(";");
    let links = sessionStorage.locations.split(";");
    let crumbindex = parseInt(sessionStorage.crumbindex);
    for(let index in crumbs){
        $("#navigation_links").append($("<li><a class='crumb"+ (index==crumbindex ? "active" : "") + "' href='"+links[index]+"' data-node='"+index+"'>"+ crumbs[index] +"</a></li>")); //data-node will help in retrieving the index and class will be set to active for selected node
    }
}

还添加：

$(document).ready(function(){
    $('#navigation_links').on('click', 'li a.crumb', function(){
        if (typeof (Storage) != "undefined") {
            sessionStorage.crumbindex = $(this).data('node');
            sessionStorage.navlinkclicked = "true"; //This will prevent from adding breadcrumb again
        }
    });
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

使用节点索引，您可以像这样插入面包屑：

function breadcrumbStateSaver(link, text) {
if (typeof (Storage) != "undefined") {
    if (sessionStorage.breadcrumb) {
        if (sessionStorage.navlinkclicked && sessionStorage.navlinkclicked=="true") {
            sessionStorage.navlinkclicked = "false"; //prevent changes or you can remove the rest of the crumbs from sessionStorage.breadcrumb and locations using a for loop
        }
        else {
            if(sessionStorage.crumbindex && sessionStorage.crumbindex!=-1) {
                let crumbs = sessionStorage.breadcrumb.split(";");
                let links = sessionStorage.locations.split(";");
                let crumbindex = parseInt(sessionStorage.crumbindex);
                sessionStorage.breadcrumb = crumbs[0];
                sessionStorage.locations= links[0];
                for(let index in crumbs){
                    if(index==0) continue;
                    sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + crumbs[index];
                    sessionStorage.locations= sessionStorage.locations + ";" + links[index];
                    if(index==crumbindex) break;
                }
                sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
                sessionStorage.locations = sessionStorage.locations + ";" + link; //insert the new link after crumbindex location
                sessionStorage.crumbindex = -1;
            }
            else{
                sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
                sessionStorage.locations = sessionStorage.locations + ";" + link; //keep appending
            }
        }
    }
    else {
        sessionStorage.breadcrumb = text;
        sessionStorage.locations = link;
    }
}

如果您只是想要导航的面包屑，而不是记录用户的遍历，您可以简单地使用window.location.pathname. 鉴于您的页面存储在具有索引页面的适当层次结构中，您所要做的就是拆分 url 路径并相应地更新 showBreadCrumb() 。您不需要使用会话存储！

    function showBreadCrumb(){
        let crumbs = window.location.pathname.split("/");
        for(let index=0; index<crumbs.length-1; index++){
            let text = crumbs[index];
            if(index==0) text = "Home";
            $("#navigation_links").append($("<li><a class='crumb"+ (index==crumbs.length-2? "active" : "") +"' href='"+buildRelativeLink(crumbs.length-index)+"'>"+ text +"</a></li>"));
        }
    }
    function buildRelativeLink(level)
    {
        level = level - 1;
        let link="";
        for (let i=1; i<level; i++)
        {
            link=link+ "../"; //Used to navigate one level up towards parent
        }
        return link;
    }
于 2020-07-02T01:00:18.120 回答