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

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

将在用户导航的序列中的每个页面上生成锚标签。

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

我心中的一些逻辑是：

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

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

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

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

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

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

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

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

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

提前致谢。

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

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

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 + " >> " + text + ""; } else { sessionStorage.breadcrumb = "" + text + ""; } } }

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

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

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

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

Interesting Posts