如何使用 JavaScript 创建动态面包屑？

在本文中，我们将了解如何使用 JavaScript 创建动态面包屑。

动态面包屑允许我们导航到导航层次结构中的不同页面，因此我们可以像文件夹结构一样以分层方式组织网站的各个页面。

方法：

以下示例是使用 HTML 和 JavaScript 实现的。

、
、
• 等 HTML 列表用于创建导航链接。

  面包屑动态导航是使用各种 JavaScript 函数实现的，例如 jQuery prepend()、clone() 和 click() 方法。单击每个导航链接 时，子节点将与底部div中的“GeeksforGeeks /”链接一起附加到其父节点，并显示类。整个导航层次结构使用 jQuery html() 方法显示在最后一个 HTML div中。

  示例：以下代码演示了上述方法。

  HTML

     
     
     
      
  
  
     body{
       background-color:white;
     }
    .display{
      background-color:red; 
    }
      
  
  
    GeeksforGeeks  
      
  
     
         Searching
           
            Linear Search
            Binary Serach
           
         
        Sorting
          
              Bubble Sort
              Merge Sort
                  
                      Recursive Merge Sort
                      Iterative Merge Sort
                  
              
              Selection Sort
              Insertion Sort 
          
       
       Tree
        
            Binary Tree
            Binary Search Tree
          
       
   
    
  
   
    
      
        GeeksforGeeks / 
      
    
           
     
  
   
     $('.topics a').on('click', function() {
      //selecting the syllabus class
        $select = $('<div class="syllabus"></div>');
        $(this).parents('li').each(function(n, li) {
           //Adding / to each anchor tag of li
            $select.prepend(' / ',$(li).children('a').clone());
        });
      // Displaying the hierarchical order of pages.
      $('.display').html(
        $select.prepend('<a href="#syllabus">GeeksforGeeks</a>'));   
  })
   
  
  
     

  
  

  输出：

  • 执行前：

  

  • 执行后：