我很难弄清楚这一点。当你在那个页面上时，我需要选中的标签下划线。因此，当您在设置页面时，我需要设置选项卡上有下划线，而当您在帐户页面时，我需要帐户选项卡上有下划线。不知道我做错了什么。我不擅长JavaScript或CSS。

这就是我需要的： 带下划线的选项卡图片

这就是我得到的： 不带下划线的选项卡图片

codepen:https://codepen.io/mike5678/pen/ondgvbj

<div id="nav">
<div class="icons-box">
    <a href="login.html" class="icons-links"><span onclick="addSelected()" class="material-icons">account_circle</span>
    </a>
</div>
<div class="icons-box">
    <a href="settings.html" class="icons-links"><span onclick="addSelected()" class="material-icons">settings</span>
    </a>
</div>

<div id="nav">
<div class="icons-box">
    <a href="login.html" class="icons-links"><span onclick="addSelected()" class="material-icons">account_circle</span>
    </a>
</div>
<div class="icons-box">
    <a href="settings.html" class="icons-links"><span onclick="addSelected()" class="material-icons">settings</span>
    </a>
</div>

<div id="nav">
<div class="icons-box">
    <a href="login.html" class="icons-links"><span onclick="addSelected()" class="material-icons">account_circle</span>
    </a>
</div>
<div class="icons-box">
    <a href="settings.html" class="icons-links"><span onclick="addSelected()" class="material-icons">settings</span>
    </a>
</div>

---

顺晟科技：

您的代码读取

<div id="nav">
<div class="icons-box">
    <a href="login.html" class="icons-links"><span onclick="addSelected()" class="material-icons">account_circle</span>
    </a>
</div>
<div class="icons-box">
    <a href="settings.html" class="icons-links"><span onclick="addSelected()" class="material-icons">settings</span>
    </a>
</div>

在第一行中，使用类查询元素，并移除其类。

在第二行中，您试图用类查询元素，但不会得到任何结果，因为您只是在上一行中从该元素中删除了类--例如，现在页面上将没有匹配选择器的元素！

---

我建议交换这两个语句的顺序，或者最好保留一个用于引用它们的元素的类和一个控制样式的类

正如我的注释中所述，当前代码试图将类样式设置为click事件上的链接。这将在加载新页面时短暂地应用，然后它将丢失。

为了在加载新页时设置该类，可以检查当前页URL（）是否包含当前页名，如下所示:

<div id="nav">
<div class="icons-box">
    <a href="login.html" class="icons-links"><span onclick="addSelected()" class="material-icons">account_circle</span>
    </a>
</div>
<div class="icons-box">
    <a href="settings.html" class="icons-links"><span onclick="addSelected()" class="material-icons">settings</span>
    </a>
</div>

使用CSS:

<div id="nav">
<div class="icons-box">
    <a href="login.html" class="icons-links"><span onclick="addSelected()" class="material-icons">account_circle</span>
    </a>
</div>
<div class="icons-box">
    <a href="settings.html" class="icons-links"><span onclick="addSelected()" class="material-icons">settings</span>
    </a>
</div>

如果您从HTML元素中删除了HTML属性（让JavaScript远离HTML文件是很好的设计实践），下面是正确的定义:

<div id="nav">
<div class="icons-box">
    <a href="login.html" class="icons-links"><span onclick="addSelected()" class="material-icons">account_circle</span>
    </a>
</div>
<div class="icons-box">
    <a href="settings.html" class="icons-links"><span onclick="addSelected()" class="material-icons">settings</span>
    </a>
</div>

这里发生了什么:

从所有元素中移除该类，然后将同一个类添加到所单击元素的父元素中。该语句用于防止单击链接时发生的默认操作。您甚至可以使用。