建立動態 Web 應用程式時，使用者介面 (UI) 需要提供直覺的導航體驗。無論是具有多個產品類別的電子商務網站還是內容豐富的管理儀表板，擁有活動狀態和可擴展菜單都可以增強可用性。在這篇文章中，我們將逐步建立一個 JavaScript 腳本，該腳本動態突出顯示導覽中的當前頁面，並根據使用者的路徑展開相關部分。
問題
當使用者瀏覽多層選單時，我們希望：
-
目前頁面連結上的活動狀態。
-
可擴充部分，如果使用者位於嵌套在選單中的頁面上，則會自動開啟。
讓我們看一個範例 HTML 結構以及如何新增 JavaScript 以使我們的選單變得聰明。
選單結構範例
這是一個典型的巢狀選單結構。我們將為選單中的每個項目使用 menu-item，為連結使用 menu-link，為可折疊子選單使用 menu-sub。
<!-- Categories -->
<li>
<p>In this structure:</p>
<ul>
<li>Each main menu link (menu-toggle) opens a submenu when clicked.</li>
<li>The actual pages are in the submenu links (menu-link).</li>
</ul>
<h3>
The JavaScript Solution
</h3>
<p>We’ll use JavaScript to:</p>
<ol>
<li>Identify the current page.</li>
<li>Apply an active class to the link that matches the current URL.</li>
<li>Add an open class to the parent menu if the link is inside a collapsed submenu.</li>
</ol>
<p>Here’s the JavaScript code:<br>
</p>
<pre class="brush:php;toolbar:false"><script>
window.onload = function () {
const currentPath = window.location.pathname; // Get the current path
const links = document.querySelectorAll('.menu-link'); // Select all menu links
links.forEach(function (link) {
// Check if the link's href matches the current page's path
if (link.getAttribute('href') === currentPath) {
// Add 'active' class to the parent 'li' element of the link
const menuItem = link.closest('.menu-item');
if (menuItem) {
menuItem.classList.add('active');
// Check if the link is within a 'menu-sub', expand the parent menu
const parentMenu = menuItem.closest('.menu-sub');
if (parentMenu) {
// Add 'open' class to the parent 'menu-item' of the submenu
const parentMenuItem = parentMenu.closest('.menu-item');
if (parentMenuItem) {
parentMenuItem.classList.add('open');
}
}
}
}
});
};
</script>
登入後複製
登入後複製
分解代碼
-
取得目前路徑：
const currentPath = window.location.pathname;
登入後複製
這會取得目前頁面的路徑（例如，/inventory-issues），我們將用它來與選單中每個連結的 href 進行比較。
-
選擇選單連結：
const links = document.querySelectorAll('.menu-link');
登入後複製
我們選擇具有選單連結類別的所有元素，假設這些元素包含指向網站各個部分的連結。
-
符合目前頁面：
if (link.getAttribute('href') === currentPath) {
登入後複製
對於每個鏈接，我們檢查其 href 是否與 currentPath 匹配。如果是，則該連結適用於目前頁面。
-
設定活動狀態：
menuItem.classList.add('active');
登入後複製
我們為最近的選單項目新增一個活動類，允許我們設定活動頁面連結的樣式。
-
展開父選單：
const parentMenuItem = parentMenu.closest('.menu-item');
parentMenuItem.classList.add('open');
登入後複製
如果活動連結位於子選單 (menu-sub) 內，這部分程式碼將尋找包含該子選單的父選單項目並新增開放類，將其展開。
為活動和開放狀態添加 CSS
您需要為 CSS 中的活動類別和開放類別定義樣式：
<!-- Categories -->
<li>
<p>In this structure:</p>
<ul>
<li>Each main menu link (menu-toggle) opens a submenu when clicked.</li>
<li>The actual pages are in the submenu links (menu-link).</li>
</ul>
<h3>
The JavaScript Solution
</h3>
<p>We’ll use JavaScript to:</p>
<ol>
<li>Identify the current page.</li>
<li>Apply an active class to the link that matches the current URL.</li>
<li>Add an open class to the parent menu if the link is inside a collapsed submenu.</li>
</ol>
<p>Here’s the JavaScript code:<br>
</p>
<pre class="brush:php;toolbar:false"><script>
window.onload = function () {
const currentPath = window.location.pathname; // Get the current path
const links = document.querySelectorAll('.menu-link'); // Select all menu links
links.forEach(function (link) {
// Check if the link's href matches the current page's path
if (link.getAttribute('href') === currentPath) {
// Add 'active' class to the parent 'li' element of the link
const menuItem = link.closest('.menu-item');
if (menuItem) {
menuItem.classList.add('active');
// Check if the link is within a 'menu-sub', expand the parent menu
const parentMenu = menuItem.closest('.menu-sub');
if (parentMenu) {
// Add 'open' class to the parent 'menu-item' of the submenu
const parentMenuItem = parentMenu.closest('.menu-item');
if (parentMenuItem) {
parentMenuItem.classList.add('open');
}
}
}
}
});
};
</script>
登入後複製
登入後複製
這種方法的好處
-
自動活動狀態：無需在每個頁面上對活動連結進行硬編碼。該腳本動態更新活動連結。
-
可擴充選單：使用者只能看到與目前頁面相關的部分，減少手動開啟選單的需要。
-
可重複使用：此腳本足夠通用，可以與各種巢狀選單結構一起使用，使其適應多種類型的網站。
？來自埃迪古萊
以上是為活動狀態和可擴展選單建立動態導航腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章！
