使用javascript在客户端动态创建面包屑 [英] Create breadcrumbs dynamically on client side using javascript

问题描述

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

I want to create breadcrumbs dynamically on client side using java script. The breadcrumbs will be the path followed by user while navigation as: Home > about us > our history..

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

The anchor tags will be generated on each page in the sequence in which the user navigate.

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

Now I can create these breadcrumbs using server side technology easily but I want to generate it dynamically on each page on client side. Now I don't know exactly how to implement it.

我心中的一些逻辑是：

1. 在java脚本中使用名称
   和值对<创建对象类型变量 / strong>其中名称是当前页面的名称
   和值是该页面的网址。

1. Create an object type variable in java script with a name and value pair where name is the name of current page and value is the url of that page.

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

Now pass this object variable using query string while navigating from one page to other.

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

Then in the second page get that object variable from query string and extract the name and value pair from that object and then using that create the anchor and add it to targeted div (place holder).

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

Again when user goes to another page add the name and value pairs for all the previous pages along with the name and value pair for current page at the last in the object variable and pass it to next page using query string.

现在在下一页执行相同的并创建主播。

Now in next page do the same and create anchors.

我使用html5客户端这里的相似之处副存储为：
html：

Some what similar I got here using html5 client side storage as: 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>

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

but here instead of creating hyperlinked anchors it is creating simple text, whereas I want the breadcrumbs to be anchors and hyperlinked to their respective pages.

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

I am new to java script and don't know how to implement this. If you have any better logic and solution for this please tell me.

提前感谢。

推荐答案

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

When you are adding the items to the breadcrumb you are not adding them as links, you are just adding text and the click events you had binded to the li elements will not passed along. Finally, you are not giving any sort of href for those breadcrumbs to use.

尝试这样的事情并将其放在4页上，每页包含这些链接和脚本文件

Try something like this and put it on 4 pages with those links and the script file on each page

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

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

This is only going to put links on pages after the first one. So alternatively you can use

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

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

at the top of each page and automatically add it to the breadcrumb instead of doing it on the click. If you need the clicks to run some other function/event you can use span/li/div tags with an id that you can bind an event to instead of just using anchors.

最后，这不会阻止碎屑中的重复，所以你可能要考虑存储链接&数组中的文本并从中构建碎屑。

Finally, this will not stop there from being duplicates in the crumb, so you may want to consider storing the links & text in an array and build the crumbs from that.

这篇关于使用javascript在客户端动态创建面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！