JavaScript 如何实现面包屑导航功能?
// 存储路径的数据结构
var paths = [];
// 获取当前页面路径并添加到数据结构中
function addPath() {
var path = window.location.pathname;
paths.push(path);
}
// 更新面包屑导航的显示
function renderBreadcrumbs() {
var breadcrumbs = document.getElementById('breadcrumbs');
breadcrumbs.innerHTML = '';
// 生成面包屑导航链接
for (var i = 0; i < paths.length; i++) {
var link = document.createElement('a');
link.href = paths[i];
link.innerHTML = paths[i];
breadcrumbs.appendChild(link);
// 添加点击事件监听
link.addEventListener('click', function(e) {
e.preventDefault();
var path = this.getAttribute('href');
navigateTo(path);
});
}
}
// 返回特定路径的页面
function navigateTo(path) {
window.location.href = path;
}
// 页面加载时执行初始化操作
window.onload = function() {
addPath();
renderBreadcrumbs();
};登录后复制