Javascript 尝试在激活时将菜单项文本更改为图标

这是我的第一个问题

我有5个菜单项和5个图标。我把它们编码成这样

<li class="nav-item">
<a class="nav-link currentactive" href=" index.html#getdemo">Get Demo</a>
<a class="nav-link2" href="index.html#getdemo"><img src="images/demo.png"></a>
</li>

上面的代码是第一部分。我在页面上有5个部分。这是一个一页的网站。不同的菜单项使用#id进入页面的不同部分

我在这里想要实现的是， 在菜单项上显示文本。并在未激活时隐藏图标（第二个）

以及当菜单项处于活动状态时。 隐藏菜单项上的文本，并显示图标（图像）

当前，菜单如下所示：

我想让它看起来像这样：

如果您想知道，我将如何检测页面上的活动部分，我已经使用这里找到的JS完成了这一部分

我想解决这个问题的办法就要写剧本了， 当菜单项处于活动状态时，显示nav-link2并隐藏nav-link1

---

但是我非常不知道如何做

将活动类应用于li，然后应用以下样式：

<li class="nav-item currentactive">
<a class="nav-link" href=" index.html#getdemo">Get Demo</a>
<a class="nav-link2" href="index.html#getdemo"><img src="images/demo.png"></a>
</li>

---

这和你说的不完全一样。然而，我能理解其中的逻辑，并能根据你的建议解决我的问题。非常感谢！：）

.currentactive .nav-link, .nav-link2 {
    display: none;
}

.curentactive .nav-link2, .nav-link  {
    display: inline-block;
}