将单击的菜单项标记为活动

【问题标题】：Mark clicked menu item as active将单击的菜单项标记为活动
【发布时间】：2022-06-15 18:59:53
【问题描述】：

所以我想知道如何使已点击的菜单项显示为“活动”/“高亮”，以便用户可以看到他们在哪个页面上？

我已经做了这个菜单栏。

/* Add a black background color to the top navigation */

.topnav_menu {
    background-color: #333;
    overflow: hidden;
    display: flex;
    align-items: center;
}


/* Style the links inside the navigation bar */

.topnav_menu a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    cursor: pointer;
}


/* Change the color of links on hover */

.topnav_menu a:hover,
.engine_dropdown:hover .engine_dropbtn {
    background-color: #ebebeb;
    color: black;
}


/* Add a color to the active/current link */

.topnav_menu a.active {
    background-color: #197cd8;
    color: white;
}

<div class="topnav_menu">
  <a href="#profile">Profile</a>
  <a href="#index">Test Runs</a>
  <a href="#dashboard">Dashboard</a>
  <a href="#dbOperations">TRT Tools</a>
</div>

单击该项目后，它应突出显示。

【问题讨论】：

• this 有帮助吗？

标签： javascript html css