话不多说,上干活兄弟们
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 设置文档编码为UTF-8 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度为设备宽度，初始缩放比例为1 --> <title>面包屑效果</title> <!-- 设置页面标题 --> </head> <body> <!-- 创建面包屑导航栏 --> <div id="breadcrumb"> <div><a href="one.html" data-url="page1.html">页面1</a></div> <div><a href="two.html" data-url="page2.html">页面2</a></div> <div><a href="there.html" data-url="page3.html">页面3</a></div> </div> <!-- 创建用于显示面包屑路径的容器 --> <div id="box"></div> <!-- 创建用于加载页面内容的iframe --> <iframe id="content" src="page1.html"></iframe> <script> // 存储已访问过的页面URL数组 let arr = []; // 获取面包屑导航栏和iframe元素 var breadcrumb = document.getElementById('breadcrumb'); var content = document.getElementById('content'); // 为面包屑导航栏中的链接添加点击事件监听器 breadcrumb.addEventListener('click', function(event) { // 检查被点击的元素是否为a标签 if (event.target.tagName === 'A') { // 如果该链接的URL尚未访问过，则将其添加到已访问URL数组中 if (arr.indexOf(event.target.getAttribute('data-url')) == -1) { arr.push(event.target.getAttribute('data-url')); console.log(arr); // 打印已访问URL数组 } // 阻止链接的默认跳转行为 event.preventDefault(); // 获取被点击链接的URL var url = event.target.getAttribute('data-url'); // 将iframe的src属性设置为被点击链接的URL，以加载相应页面内容 content.src = url; // 根据已访问URL数组动态生成面包屑路径 let str = ''; console.log(content.src); // 打印当前iframe的src属性值 for (let i in arr) { // 为当前访问的页面设置红色背景，其他页面设置默认背景颜色 str += `<span style="background-color:${content.src == 'http://127.0.0.1:8848/code/lx/'+arr[i]?'red':''};"> ${arr[i]} </span>`; } // 将生成的面包屑路径插入到页面中 document.getElementById('box').innerHTML = str; } }); </script> </body> </html>
样式就要自己添加了
我是小辉,谢谢大家观看
