En este artículo, veremos cómo crear migas de pan dinámicas usando JavaScript.
Una ruta de navegación dinámica nos permite navegar a diferentes páginas dentro de la jerarquía de navegación y, por lo tanto, podemos organizar varias páginas del sitio web de manera jerárquica, como una estructura similar a una carpeta.
Acercarse:
El siguiente ejemplo se implementa utilizando HTML y JavaScript.
Las listas HTML como <ol> , <ul> , <li> se utilizan para crear los enlaces de navegación.
La navegación dinámica de migas de pan se implementa utilizando varias funciones de JavaScript como los métodos jQuery prepend() , clone() y click() . Al hacer clic en cada enlace de navegación <a> , los Nodes secundarios se agregan a su principal junto con el enlace «GeeksforGeeks /» en el div inferior con la visualización de la clase. Toda esta jerarquía de navegación se muestra en el último div HTML usando el método jQuery html() .
Ejemplo: El siguiente código demuestra el enfoque anterior.
HTML
<!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 Serach</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>
Producción:
- Antes de ejecutar:
- Después de ejecutar:
