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

Question

这是我的第一个问题。

我有 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 完成了该部分。 https://github.com/davist11/jQuery-One-Page-Nav

我认为这个问题的解决方案接近于编写脚本，当菜单项处于活动状态时，显示 nav-link2 并隐藏 nav-link1

但是我很迷茫该怎么做

Answer 1

对 li 应用 active class，然后应用以下样式：

<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>

Css

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

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

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

Trying to change menu item text to an icon when active

javascript

navigation

menu