活动类未添加到 navbar-nav nav-item [重复]答案

【问题标题】：Active class is not being added to navbar-nav nav-item [duplicate]活动类未添加到 navbar-nav nav-item [重复]
【发布时间】：2018-06-27 11:41:07
【问题描述】：

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

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

【问题讨论】：

这是一个 Javascript /Jquery 问题....你的在哪里？你把它链接进去了吗？
我在页面底部的 jquery.js 文件下包含了 bootstrap.js 文件
那你需要演示它没有发生。
没有控制台错误？你能提供一个有效的 sn-p 给我们看看错误吗？

标签： html css bootstrap-4

【解决方案1】：

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

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

另请阅读并确保您正确使用此link。

首先确保你已经正确地包含了引导程序的样式表和脚本：

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

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

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

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

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

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

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

【讨论】：

还要确保您的库、脚本和样式表位于 html/php 文件的顶部。
我认为这个问题被标记为bootstrap-4。你错过了吗？
感谢您的通知。是的，我错过了。
那么，既然您已经意识到了这一点，您觉得没有必要编辑您的帖子，是吗？？
@WebDevBooster 将您的时间花在 StackOverflow 上，以便您可以帮助他人或向他们学习一些东西。如果您不愿意对适合作为解决方案的帖子或指导提出问题的帖子提供答案/评论，那么请离开这里。你做了 4 次关于批评别人的评论/回答的 cmets。先提升自己。这不是脸书。

【解决方案2】：

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

【讨论】：

这是评论，不是问题的答案。不要将 cmets 放在答案部分。请删除。
@Rob 声望分数低于 50 的 cmets 是不可能发布的。你们中似乎有不少模组你不知道这个简单的事实......
@WebDevBooster 我们知道这个简单的事实，并且这样做是因为像您这样的人似乎不知道的原因。
@Rob 好的，那你的评论有什么意义呢？该用户的声誉得分为 1。当我的代表时，我也得到了这样的 cmets。分数低于 50。
为了让发帖人知道 1) 为什么他的评论会很快被删除，以及 2) 当他被告知他应该“参加巡回演出”时，暗示他在注册 SO 时应该注意并阅读帮助中心。显然你还没有。