Question

单击链接时，应将活动类添加到单击的菜单中，以便突出显示。我无法获得此行为，因此当我点击任何链接时，只有第一个仍然突出显示。必须遗漏一些东西，我无法指出它。这是我的代码

<ul class="navbar-nav ml-auto">
<li class="nav-item active">
    <a class="nav-link" href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="about">About</a>
</li>
</ul>

Answer 1

我编辑了这个，因为我发现了一个类似的帖子，上面有一个合适的答案。

关注此link。它必须处理bootstrap 3，但它也适用于4。

同时阅读并确保正确使用此link。

首先请确保您已正确包含bootstrap的样式表和脚本：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

其次，请确保您在nav-link元素中使用的fa或<li></li>类不会覆盖活动类。

尝试在代码中添加新的列表项，看看它是否有效：

<li class="active"><a href="https://stackoverflow.com/">Stack Overflow</a></li>

如果不是尝试创建一个包含活动类样式表的新类并使用！important。然后将其添加到您的元素：

即。 .myclass{ padding-top: 100px !important; }

如果上述任何一项工作确保您在设置html / php文件样式时始终通过浏览器检查项目。在那里，您可以添加或删除css格式，并查看元素的确切样式。

Answer 2

点击链接或重定向到其他链接后，可能正在重新加载您的页面。重定向将使您的链接处于初始状态。否则，您的代码可能会出现一些JavaScript问题。

未将有效类添加到navbar-nav nav-item

2 个答案: