极客教程JavaScript 如何创建动态面包屑
在本文中，我们将看到如何使用JavaScript创建动态面包屑。
动态面包屑允许我们在导航层次结构中导航到不同的页面，因此我们可以像文件夹结构一样按层次结构组织网站的各个页面。
方法：
以下示例是使用HTML和JavaScript实现的。
使用HTML的列表，如<ol>、<ul>、<li>来创建导航链接。
面包屑动态导航是使用各种JavaScript函数实现的，如jQuery的prepend()、clone()和click()方法。点击每个导航链接<a>时，子节点将附加到其父节点，同时在底部的带有class为display的div中附加GeeksforGeeks /链接。使用jQuery的html()方法在最后的HTML的div中显示整个导航层次结构。
示例：
以下代码演示了上述方法。
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<style>
body{
background-color:white;
}
.display{
background-color:red;
}
</style>
<body>
<h2 style="color:green;">GeeksforGeeks</h2>
<div class="topics">
<ol>
<li><a href="#"><b>Searching</b></a>
<ul>
<li><a href="#">Linear Search</a></li>
<li><a href="#">Binary Search</a></li>
</ul>
</li>
<li><a href="#"><b>Sorting</b></a>
<ul>
<li><a href="#">Bubble Sort</a></li>
<li><a href="#">Merge Sort</a>
<ul>
<li><a href="#"><i>Recursive Merge Sort</i></a></li>
<li><a href="#"><i>Iterative Merge Sort</i></a></li>
</ul>
</li>
<li><a href="#">Selection Sort</a></li>
<li><a href="#">Insertion Sort</a>
</ul>
</li>
<li><a href="#"><b>Tree</b></a>
<ul>
<li><a href="#">Binary Tree</a></li>
<li><a href=" #">Binary Search Tree</a></li>
</ul>
</li>
</ol>
</div>
<div class="display">
<div class="syllabus">
<a href="#">GeeksforGeeks / </a>
</div>
</div>
<script type="text/javascript">
('.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>'));
})
</script>
</body>
</html>
输出：
- 执行前：
- 执行后：
