数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律学如何使用 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 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 循环遍历路径数组的元素，使用每个路径组件创建文本和链接，并将其推送到 linkPaths 数组中。此外，使用 decodeURIComponent() 方法解码 URI 组件。
步骤 4 – 使用 map() 方法在<span>元素中添加链接，并从 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>
3K+ 次浏览
