資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次瀏覽
