时间戳

首页 > 解决方案 > 如何使用javascript在html中选择菜单项

javascript - 如何使用javascript在html中选择菜单项

问题描述

这是我的html代码。浏览时如何保持选择菜单项（链接到另一个页面）？我想用javascript来做。先感谢您。

<ul class="header-menu" id="nav">
    <li class="menu-item"><a href="home.html">HOME</a></li>
    <li class="menu-item"><a href="news.html">NEWS</a></li>
    <li class="menu-item"><a href="tour_dates.html">TOUR DATES</a></li>
    <li class="menu-item"><a href="gallery.html">GALLERY</a></li>
    <li class="menu-item"><a href="about.html">ABOUT</a></li>
</ul>

标签： javascripthtmlcss

解决方案

有多种方法可以达到这种效果。让我们首先声明您有一个“活动”类，您可以在菜单项上使用它来使它们弹出，您将如何应用该类？

首先，我会为所有菜单项分配一个特定的类或 id，以使它们易于在 css（或 javascript）中引用。

假设现在你的情况是这样的：

<ul class="header-menu" id="nav">
    <li class="menu-item home-item"><a href="home.html">HOME</a></li>
    <li class="menu-item news-item"><a href="news.html">NEWS</a></li>
    <li class="menu-item tour-item"><a href="tour_dates.html">TOUR DATES</a></li>
    <li class="menu-item gallery-item"><a href="gallery.html">GALLERY</a></li>
    <li class="menu-item about-item"><a href="about.html">ABOUT</a></li>
</ul>

现在，使用 javascript，您可以这样做：

// Get the page name
let pathArray = location.pathname.split("/");
let page = pathArray[pathArray.length-1];

// Get all menu items and convert them to an Array
let menuItems = document.querySelectorAll(".header-menu .menu-item");
menuItems = new Array(...menuItems);

let lookFor = "";

// Based on the page, set the variable lookFor as the identifying class
switch (page) {
    case "home.html":
        lookFor = "home-item";
        break;
    case "news.html":
        lookFor = "news-item";
        break;
    // ...
}

// Get the element that contains the class
let item = menuItems.filter( (item) => item.classList.contains(lookFor) )[0];

// Set the "active" class on the element
item.classList.add("active");

在这里，您可以查看带有工作代码的代码框。

推荐阅读