如何使用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() - 用于在每个元素上添加点击事件。

Parent() - 查找当前元素的所有父元素，并从中筛选出

元素。

Each() - 用于迭代每个

元素，这是被点击元素的父元素。它将索引作为第一个参数，将元素作为第二个参数。

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

Prepend() - 在HTML元素内容的开头追加任何HTML内容。

步骤

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

步骤2 - 访问我们希望添加面包屑的HTML元素。

步骤3 - 使用parents()方法查找被点击元素的所有父元素，并从中筛选出

元素。

步骤4 - 遍历每个父

元素，并访问子元素。

步骤5 - 为每个

元素创建子元素的副本。

步骤6 - 使用prepend()方法将路径组件前置在选定元素的HTML中。

步骤7 - 最后，在选定的div元素的HTML之前添加网站的首页位置。

示例

在下面的示例中，我们创建了

元素来创建导航。我们还添加了一个列表作为另一个列表的子列表，以创建嵌套导航。

在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 texts$ select =  $('<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 breadcrumbs$ select.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>