“活动”类在 Bootstrap 导航栏中不起作用答案

【问题标题】："Active" class not working in Bootstrap Navbar“活动”类在 Bootstrap 导航栏中不起作用
【发布时间】：2018-08-05 19:18:25
【问题描述】：

这个网站上还有一个与这个类似的问题，但不幸的是，在尝试了该问题之后的所有建议后，我仍然没有找到解决方案。

此时我的导航栏看起来非常基本：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand"<%= link_to 'GoChat', root_path %></a>
    </div>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <%= link_to 'New Comment', new_comment_path %></li>
        <li class="nav-item active">
            <%= link_to 'View Comments', comments_path %></li>
        <li class="nav item">
            <%= link_to 'Profile', user_path(current_user) %></li>
     </ul>     
  </div>
</nav>

按照问题Bootstrap navbar Active State not working 给出的建议，我尝试将以下代码添加到我的应用程序js 文件中，但这不起作用。我还尝试使用 html 链接而不是我当前使用的嵌入式 Ruby 链接。

$(".nav-item").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

我也尝试在 jquery 代码中使用“nav a”标签，甚至也尝试使用“li”标签，但这不起作用。

我没有使用 Bootstrap CDN - 我将压缩和缩小的文件下载到我的应用程序中。我也尝试过使用 CDN，但没有效果。除此之外，我认为唯一要提的是，我的应用程序js中使用了以下代码：

//= require rails-ujs

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

在应用程序 css 中：

 *= require_tree .
 *= require_self
 *= require rails_bootstrap_forms

我不知道接下来要尝试什么，因此我非常感谢您对此提供一些帮助，谢谢 :-)

【问题讨论】：

“不工作”是什么意思？怎么了？你预计会发生什么？
活动类将按钮呈现为不同的阴影，以表明它正在使用中。
@Robert ，简单的问题，您是否已将 bootstrap cdn js/css 添加到标题中？此外，我在您的 HTML 中的任何地方都看不到 $(".nav-link") - .nav-link。
对不起，我好像错过了这个 - 我没有使用 cdn，我将压缩和缩小的文件下载到我的应用程序中。但我确实尝试过使用 cdn 来查看它是否有任何不同 - 它没有。

标签： javascript css ruby-on-rails twitter-bootstrap navbar

【解决方案1】：

当我们的浏览器不工作时，有时引导程序不起作用，因此请先检查并添加正确的在线链接然后执行。所以我写了一些'Active'类引导程序的代码，试试吧。它可能会帮助你解决你的问题。谢谢！

    <!DOCTYPE html>
<html lang="en">`enter code here`
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active" ><a href="wordpress.com" target="blank">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</nav>
</body>
</html>

【讨论】：

【解决方案2】：

所以首先我包括Bootstrap cdn。

编辑您的问题后，我认为您缺少jQuery 链接（Bootstrap 的 JavaScript 插件所必需的）。

  <!--jQuery -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

这只是一个例子，因为你的 js 是针对你没有的 HTML 类。

$(".nav-item").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

.active {
  color: red;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />

<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>



<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand"<%= link_to 'GoChat', root_path %></a>
    </div>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <%= link_to 'New Comment', new_comment_path %></li>
        <li class="nav-item active">
            <%= link_to 'View Comments', comments_path %></li>
        <li class="nav-item">
            <%= link_to 'Profile', user_path(current_user) %></li>
     </ul>     
  </div>
</nav>

【讨论】：

谢谢，但这都是在我上面提到的问题中给出的。我在 Jquery 代码中尝试了所有不同的标签，但结果相同。
这真的很奇怪，这应该可以工作，我改变了我的代码，在你的 li 你最后一堂课错过了一个 - ，也很抱歉问，但因为我看不到你所有的代码，你呢还包括jQuery？就像我在上面所做的那样@
我没有使用 CDN，所以我没有以同样的方式这样做。我刚刚在 js 文件中需要 jquery。如果还有什么我需要做的，那我就不知道了
您的控制台是否显示任何错误？ “我刚刚在 js 文件中需要 jquery”意味着您下载了 jQuery 并添加到 js 目录中，该目录包含在标题中？ you cant download jQuery and include it into a file else 那么你就在正确的轨道上，而且我也不确定老实说有什么问题。如果您view page source 并看到链接的样式标签和脚本标签，那么您的代码应该可以工作。（更新此行$(this).addClass("active");）
我还没有下载 jQuery - 我的应用程序中只有 jquery-rails gem。 Bootstrap 只需要你下载 javascript 和 css 文件，所以我想我认为 jquery 就在其中。是否需要对 jquery 采取任何措施才能使 Bootstrap 充分发挥作用？

【解决方案3】：

请提前原谅冗长的答案:)

我有 2 条语法建议：

1：`<a>` 即`link_to` 语法

在第 4 行中，您的 erb 语法似乎有错误：

问题：

您认为这行不通：

<a class="navbar-brand"<%= link_to 'GoChat', root_path %></a>
您需要关闭您的<a> 标签，即：

<a class="navbar-brand"><%= link_to 'GoChat', root_path %></a>
这有问题。我怀疑你想要一个锚标签中的锚标签，但是使用给定的语法，你的代码将编译成这样：

<a class="navbar-brand"><a href="/your_root_path">GoChat</a></a>

解决方案：

在 Rails 中，您可以通过以下方式实现您想要的：

<%= link_to 'GoChat', root_path, class: "navbar-brand" %>
这将编译为：

<a href="/your_root_path" class="navbar-brand">GoChat</a>

2：`<li>` 语法

问题：

您的第三个<li> 在类名中缺少连字符。

解决方案：

我想你想要：

<li class="nav-item">

提出你的问题

我认为你想要达到的效果可以在下面的sn-p中演示：

$(document).ready(function() {
  $(".nav-item a").click(function() {
    $('.active').removeClass("active");
    $(this).parent().addClass("active");
  });
});

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

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Go Chat</a>
    </div>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a href="#">New Comment</a>
      </li>
      <li class="nav-item active">
        <a href="#">View Comments</a>
      </li>
      <li class="nav-item">
        <a href="#">Show Profile</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

但是，从查看您的代码来看，您似乎正在尝试基于当前路由获取一个活动类。您无法使用 JQuery 事件处理程序轻松或实际实现此目的，因为页面路由将被更改，并且在单击链接时将加载新页面。

建议的解决方案

在这个例子中我会完全忘记 JQuery。尝试使用 erb 根据当前路由有条件地应用 active 类，如下所示：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <%= link_to 'GoChat', root_path, class: "navbar-brand" %>
    </div>

    <ul class="nav navbar-nav">
      <li class="nav-item <%= 'active' if current_page?(new_comment_path) %>">
        <%= link_to 'New Comment', new_comment_path %>
      </li>
      <li class="nav-item <%= 'active' if current_page?(comments_path) %>">
        <%= link_to 'View Comments', comments_path %>
      </li>
      <li class="nav-item <%= 'active' if current_page?(user_path(current_user)) %>">
        <%= link_to 'Profile', user_path(current_user) %>
      </li>
    </ul>    
  </div>
</nav>

我希望这会有所帮助。

【讨论】：

感谢 cmets 和解决方案。我有点惊讶 Bootstrap 中的导航栏不提供此功能，这似乎是一个很明显的要求。

1：&lt;a&gt; 即link_to 语法

2：&lt;li&gt; 语法

提出你的问题

建议的解决方案

1：`<a>` 即`link_to` 语法

2：`<li>` 语法