JavaScript 如何创建动态面包屑

面包屑 帮助网站用户了解导航路径，windows文件资源管理器就是提供面包屑的最好例子。当你打开文件资源管理器时，你可以在文件资源管理器的顶部栏看到当前的位置。另外，如果你点击任何位置，它就会跳转到该位置。

在网站上使用动态面包屑有两个主要好处。第一是用户可以知道导航路径，另一个是用户可以直接跳到导航路径中的任何位置。

在这里，我们将看到用JavaScript创建面包屑的不同方法。

使用jQuery创建面包屑

jQuery 包含各种方法，如 clone(), prepend(), parents() 等，我们将在这里使用这些方法来创建一个自定义算法来生成动态面包屑。

语法

用户可以按照下面的语法来使用JQuery来创建面包屑。

$('.URLS a').on('click', function () {
   $(this).parents('li').each(function (index, list) {
      let anchor = $(list).children('a').clone();
      $select.prepend(' / ', anchor);
   });

在上面的语法中，’select’是一个使用JQuery来添加面包屑的选定的div，作为HTML。

使用的方法

On() - 它用于在每个<a>元素上添加一个点击事件。

Parent() - 它找到当前元素的所有父元素，并从中过滤<li>元素。

Each() - 它用于遍历每个<li>元素，它是被点击元素的父元素。它把索引作为第一个参数，把元素作为第二个参数。

Clone() - 它创建一个任何HTML元素的副本。

Prepend() - 它用于在HTML元素内容的开头添加任何HTML。

操作步骤

第1步 - 使用 on() 方法在每个<a>元素上添加一个点击事件监听器。

第2步 - 访问我们要添加面包屑的HTML元素。

第3步 – 使用parents()方法找到所有被点击元素的父元素，并从中过滤<li>元素。

第4步 - 遍历每个父<li>元素并访问子<a>元素。

第5步 - 为每个<li>元素制作一个克隆的子 <a>元素。

第6步 – 使用 prepend () 方法，在所选元素的HTML中预置路径组件。

第7步 – 最后，在选定的div元素的HTML中预置网站的主页位置。

例子

在下面的例子中，我们创建了<li>元素来创建导航。我们还添加了一个列表作为另一个列表的子列表来创建嵌套导航。

在JavaScript中，我们找到每个被点击元素的父列表，并将它们预置到面包屑中。由于parent()方法以相反的顺序返回父元素，我们需要使用prepend方法，以原始顺序显示导航组件。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h2> Creating the <i> dynamic breadcrumbs </i> using jQuery </h2>
   <div class = "URLS">
      <ul>
         <li> <a href="/"><b> URL 1 </b></a>
            <ul>
               <li> <a href="#"> Sub URL 1 </a> </li>
               <li> <a href="#"> Sub URL 2 </a> </li>
            </ul>
         </li>
         <li> <a href="#"><b> URL 2 </b></a>
            <ul>
               <li> <a href="#"> Sub URL 1 </a> </li>
               <li> <a href="#"> Sub URL 2</a>
                  <ul>
                     <li> <a href="#"><i> Sub Sub URL 1 </i></a> </li>
                     <li> <a href="#"><i> Sub Sub URL 2 </i></a> </li>
                  </ul>
               </li>
               <li> <a href="#"> Sub URL 3 </a> </li>
               <li> <a href="#"> Sub URL 4 </a> </li>
            </ul>
         </li>
         <li> <a href="#"> <b> URL 3 </b> </a>
            <ul>
               <li> <a href="#"> Sub URL 1 </a> </li>
               <li> <a href=" #"> Sub URL 2 </a> </li>
            </ul>
         </li>
      </ul>
   </div>
   <p class="breadcrumbs"></p> 
   <script type="text/javascript">

      // added click event on every anchor element
      ('.URLS a').on('click', function () {

         // selecting P element to append textsselect = ('<p class="breadcrumbs"></p>');

         // iterate through each <li> which are parent of clicked <a> element(this).parents('li').each(function (index, list) {

            // make a clone of current <a> element
            let anchor = (list).children('a').clone();

            // prepend current <a> element to breadcrumbsselect.prepend(' / ', anchor);
         });

         // prepend tutorialspoint.com at the beginning of the breadcrumb menu.
         select.prepend('<a href="#">TutorialsPoint.com</a>')('.breadcrumbs').html($select);
      })
   </script>
</body>
</html>

获取当前位置并创建面包屑

我们可以使用 window.location() 方法来获取浏览器的当前位置。之后，我们可以将位置URL分割到组件中，并使用它们创建面包屑。

语法

用户可以按照下面的语法，通过访问位置来创建面包屑。

let path = location.href.split('/').slice(3);
const linkPaths = [{ "main": 'TutorialsPoint.com', "link": '/' }];
for (let i = 0; i < path.length; i++) {
   linkPaths.push({ "main": anchorText, "link": link });
}
let values = linkPaths.map((part) => {
   return "<a href="" + part.link + "">" + part.main + "</a>"
}).join('<span style="margin: 5px">/</span>')

操作步骤

第1步 --使用location.href()方法来访问当前的位置。

第1.1 - 使用split()方法，用’/’分隔符分割href。

第1.2 步–使用slice()方法从数组中删除前三个元素，即’http’、’www’等。

第2步 - 创建一个包含对象的linkPaths数组。该对象包含文本和链接属性。

第3步 --使用for循环遍历路径数组中的元素，使用每个路径组件创建文本和链接，并推送到链接路径数组中。同时，使用decodeURIComponent()方法对URI组件进行解码。

第4步 - 使用map()方法在元素中添加链接，并从linkPaths对象的数组中创建面包屑。

例子

在下面的例子中，我们从浏览器中访问位置，并实现上述算法来创建面包屑。此外，我们还在面包屑的开头添加了一个指向tutorialspoint网站主页的链接。

<html>
<body>
  <h2>Creating the <i> dynamic breadcrumbs </i> using javascript.</h2>
  <p id="breadcrumbs"> </p>
  <script>
    function configureBredcrumbs() {
      // get the location
      let path = location.href.split('/').slice(3);
      // create an array of objects to store links and anchor text
      const linkPaths = [{ "main": 'tutorialspoint.com', "link": '/' }];
      // iterate through the path array
      for (let i = 0; i < path.length; i++) {
        const component = path[i];
        // convert URL to the text
        const anchorText = decodeURIComponent(component).toUpperCase().split('.')[0];
        // create a link
        const link = '/' + path.slice(0, i + 1).join('/');
        // push to array
        linkPaths.push({ "main": anchorText, "link": link });
      }
      // add links in the span
      let values = linkPaths.map((part) => {
        return "<a href="" + part.link + "">" + part.main + "</a>"
      }).join('<span style="margin: 5px">/</span>')

      let element = document.getElementById("breadcrumbs");
      element.innerHTML = values;
    }
    configureBredcrumbs();
  </script>
</body>
</html>