JS中如何制作面包屑导航

制作面包屑,首先我肯要先知道什么是面包屑导航,其原理是什么。

面包屑导航这个概念来自于一个童话故事《汉赛尔和格莱特》,他们兄妹俩在穿过森林时不小心迷路了,但是却发现在沿途走过的地方都撒下面包屑,这些面包屑可以来帮助他们找到回家的路。

 所以面包屑导航的用意就是告知用户所处的当前网页的位置,方便用户可以通过该导航快速返回上一页。

1.先写一个树形菜单的大概样式

当我们点击树形菜单时,导航栏会出现一个面包屑(说明在树形菜单的点击事件里,每点击一次都会渲染一个)

                
  • 首页

  • 首页2

  • 首页

  • 首页2

  • 首页3

  • 首页

  • 首页2

  • 首页3

  • 2.大概写一个面包屑的结构

                    
    				

    首页

    我的树形菜单和面包屑的数据是同一个数据,点击树形菜单时会渲染一块面包屑,但是再次点击时不能重复渲染把,所以这就需要我们“去重”。对比面包屑数据里是否有相同的,有的话删掉,没有就渲染。

          

     面包屑的作用

    • 便于用户了解当前页面的所处位置,以及当前页面在整个网站中的所处位置
    • 便于用户了解网站的层次结构,提高用户的体验
    • 降低跳出率,用户通过面包屑导航可以看到自己感兴趣的内容从而吸引用户留在网站中继续进行浏览,降低网站的跳出率
    • 有利于网站内链的建设,促进优化排名

    以上呢是一个大概的,具体功能的实现不仅仅只是这一点,我写的不全面,请自己思考把。

    你可能感兴趣的:(javascript,前端,html)